Validate form data before submit and based on the validation call another function using javascript

Question

I am new to web development. I am building an application to log effort. Currently i am mandating the form elements. Need to check if all fields are populated and then export the form data to an excel.

I have written the below code, please do consider that i am a newbie into this before firing on me about the code ethics.

Currently i am not focusing on the CSS part, so i do not have a css file.

<html>

<head>
  <script type="text/javascript" language="javascript">
    function WriteToFile(passForm) {

      var fso = new ActiveXObject("Scripting.FileSystemObject");
      var fileLoc = "E:\\sample.csv";
      var file = fso.openTextFile(fileLoc, 8, true, 0);
      file.writeline(passForm.inputText.value + ',' +
        passForm.timeSpent.value + ',' +
        passForm.SystemDate.value + ',' +
        passForm.UserName.value);
      file.Close();
      alert('File created successfully at location: ' + fileLoc);

    }

    onload = function systemDate() {

      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();

      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var today = mm + '/' + dd + '/' + yyyy;
      document.getElementById("date").value = today;

    }
  </script>
</head>

<body>
  <p>Happily log your effort!</p>
  <form>
    Ticket Number : <input id="inc" type="text" name="inputText" required="true" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" required="true" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
      required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
    <input type="Submit" value="submit" onclick="WriteToFile(this.form)">
  </form>
</body>

</html>

Please help me out in successfully validating all fields and exporting the data.

This is a much simpler code where i have marked field elements required but still the form data is getting exported even when the required fields are empty and in fact the validation is happening post export.

Please click the `<>` snippet editor and post relevant HTML and JavaScript in a [mcve] — mplungjan, May 06 '17 at 15:53
_I have written the below code_ - You forgot to include it :) — Alon Eitan, May 06 '17 at 15:53
@mplungjan sir, this is the complete code i have, in a single file. — Md_Abrar, May 06 '17 at 16:03
@mplungjan I have updated the post with minimal code as you requested. — Md_Abrar, May 06 '17 at 16:36

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Try this - please note I have been pragmatic and used onload and form element access - that is because it will work in all browsers without loading things like jQuery etc. I have also not tested for valid date. There are thousands of scripts that do that

Also note that you need to remove the required if you want to do simple error handling yourself. If you want custom error handling taken care of by HTML5, you will face compatibility issues in IE <11

HTML5 form required attribute. Set custom validation message?

So this one uses simple validation now I removed required

<html>

<head>
  <script>
    function WriteToFile(passForm) {

      var fso = new ActiveXObject("Scripting.FileSystemObject");
      var fileLoc = "E:\\sample.csv";
      var file = fso.openTextFile(fileLoc, 8, true, 0);
      file.writeline(passForm.inputText.value + ',' +
        passForm.timeSpent.value + ',' +
        passForm.SystemDate.value + ',' +
        passForm.UserName.value);
      file.Close();
      alert('File created successfully at location: ' + fileLoc);

    }

    function pad(num) {return String("0"+num).slice(-2)}
    function systemDate() {
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();
      document.getElementById("date").value = pad(mm) + '/' + pad(dd) + '/' + yyyy;
    }

    window.onload=function() {
      systemDate();
      document.getElementById("myForm").onsubmit=function() {
         if (this.inputText.value=="") {
           alert("Please enter Ticket Number");
           this.inputText.focus();
           return false;
         }
         if (this.timeSpent.value=="") {
           alert("Please enter TimeSpent");
           this.timeSpent.focus();
           return false;
         }
         WriteToFile(this);
         return false; // cancel submit
      }
    }

</script>
</head>

<body>
  <p>Happily log your effort!</p>
  <form id="myForm">
    Ticket Number : <input id="inc" type="text" name="inputText"  size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent"  size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
      required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
    <input type="Submit" value="submit">
  </form>
</body>

</html>

It works just as i was expecting it to and the tweaks on date thing is also cool. I am really thankful sir. Although this application i am developing is for self learning, it is important that i be successful at my first attempt to keep up my web development hunger. Once again, thank you very much! — Md_Abrar, May 06 '17 at 17:34
However, the alerts that you have written inside the onsubmit function don't seem to work. I mean they are never pop up on the web page window although the "This field is required" message shows up, colouring the text box red! Any idea about what's missing, sir?! — Md_Abrar, May 06 '17 at 17:42
Yes, Please remove required to have simple error handling, If you need HTML5 handling with custom errors, see the link I posted in the update — mplungjan, May 06 '17 at 18:08
This is perfect. Thank you for the info and all your help. Have a great day:) — Md_Abrar, May 06 '17 at 18:26

Validate form data before submit and based on the validation call another function using javascript

1 Answers1