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

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.

Solution

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>