在提交之前验证表单数据并基于验证调用另一个函数使用javascript

时间:2017-05-06 15:51:58

标签: javascript html activex

我是网络开发的新手。我正在构建一个记录工作的应用程序。目前我正在强制使用表单元素。需要检查是否已填充所有字段,然后将表单数据导出到Excel。

我已经写了下面的代码,在向我解释代码伦理之前,请考虑我是新手。

目前我不关注CSS部分,所以我没有css文件。



<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>
&#13;
&#13;
&#13;

请帮我成功验证所有字段并导出数据。

这是一个更简单的代码,我需要标记字段元素,但即使必填字段为空,表单数据仍然导出,实际上验证是在导出后进行的。

1 个答案:

答案 0 :(得分:1)

试试这个 - 请注意我一直实用并使用onload和表单元素访问 - 这是因为它可以在所有浏览器中工作而无需加载jQuery等等。我也没有测试过有效日期。有数以千计的脚本可以做到这一点

另请注意,如果您想自己进行简单的错误处理,则需要删除所需的内容。如果您希望HTML5处理自定义错误处理,您将在IE&lt; 11

中遇到兼容性问题

HTML5 form required attribute. Set custom validation message?

所以这个使用简单的验证现在我删除了所需的

<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>