8

我正在验证以下函数中的日期。如果验证失败，则不应提交表单。我尝试在表单 onsubmit 中返回 false，但它仍然被提交。但是，验证工作正常并收到我在函数中输入的警报。如果验证失败，任何帮助停止提交表单。

<script>
  function dateCheck()
  {
      start = document.getElementById('name3').value;
      end = document.getElementById('name4').value;
      compare(start, end);
      document.getElementById('name4').focus();

  }

  function compare(sDate, eDate)
  {

      function parseDate(input) {
            var parts = input.match(/(\d+)/g);

            return new Date(parts[2], parts[0]-1, parts[1]); // months are 0-based
          }
       var parse_sDate = parseDate(sDate);
      var parse_eDate = parseDate(eDate);
       parse_sDate.setFullYear(parse_sDate.getFullYear() + 1);

      if(parse_eDate >= parse_sDate)
          {
          alert("End date should not be greater than one year from start date");
           return false;
          }
       return true;
  }

</script>
</head>
<body>
<form onsubmit="return dateCheck()">
<table>
<tr>
<td><input type="text" name="soname3" id="name3" size="15" readonly="readonly"> 
<img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name3','MMddyyyy','dropdown',false,'12')" /></td>
 <td><input type="text" name="soname4" id="name4" size="15" readonly="readonly">
 <img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name4','MMddyyyy','dropdown',false,'12'); " /> </td>
 </tr>
</table>
<input type="submit" value="Submit">
</form>
4

7 回答 7

18

只是一个评论：

如果您的侦听器传递对表单的引用，您可以按名称或 ID 访问控件：

<form onsubmit="return dateCheck(this)">

然后：

function dateCheck(form) {
  var start = form.name3.value;
  ...
}

请注意，您应该声明变量，否则它们将在分配给它们的点成为全局变量。此外，您应该在将控件中的值传递给比较函数之前检查它们（如果不是，则显示一条消息，要求用户输入有效值）。

function dateCheck(form) {
  var start = form.name3.value;
  var end = form.name4.value;
  var valid = compare(start, end);

  if (!valid) form.name4.focus();

  return false;
}
于 2013-07-15T04:10:11.203 回答
3

我感谢以上所有贡献。我刚刚应用了上面的建议来解决我的挑战并且效果很好。保持简单，我使用以下内容：

<form id="newuser" action="newuser.php" onsubmit="return pswderr(this)">

对于我有的按钮

<input id='submit' type="submit" value="Login" onClick="return pswderr();">

我的脚本是：

<script>
function pswderr() {
    var pswd1 = document.getElementById("newuserpswd").value;
    var pswd2 = document.getElementById("rptpswd").value;
    if (pswd1 !== pswd2) {
        document.getElementById("alarm").innerHTML = "Password and password  
        verification do not match. Retry";
        return false;
    } else {document.getElementById("alarm").innerHTML = "";
        return true;
        }
}
</script>
于 2015-08-25T19:23:25.710 回答
2

在表单标签属性 onsubmit=" return validateForm()" 中的 onclick 属性上使用 return ，如果您在 javascript 的验证函数中返回 false 如果输入不正确，那么您必须将 return 添加到您的 onclick 属性以便它执行。希望它对某人有所帮助！

<script>
        function validateForm(){
            var validation = false;
            var phonenumber = document.forms["enqueryForm"]["phonenumber"].value;
            if(phonenumber != 11) {
                alert("phonenumber is incorrect");
                //e.preventDefault();
                return false;
    
            }
        }
</script>
<form class="form-style-5" action="BookingForm.php" method="post" id="bookingForm" onsubmit="return validateForm()" name="enqueryForm">
<input type="tel" name="phonenumber" placeholder="your no.">
<input type="submit" name="submit" value="submit">
</form>

于 2018-06-26T06:46:26.737 回答
0

return如果在子函数中调用表单，则不会阻止表单提交，例如compare(sDate, eDate)

所以把你的功能改成这个

function dateCheck(e){

  var start = document.getElementById('name3').value;
  var end = document.getElementById('name4').value;
  if(compare(start, end)) {
    // no error submit i guess
    // return true ?
  } else {
    // error with date compare
    return false;
  }
  end.focus();

}
于 2013-07-15T04:01:13.020 回答
0

在我的情况下，我在输入字段中使用了模式并且还给出了maxlength。

对我有用的是，从输入字段中删除 Length 属性

于 2018-03-09T10:45:38.997 回答
-1

您可以使用jQuery Form Plugin实现相同的目的。

$(document).ready(function() { 

    $('#your_form_id').ajaxForm( { beforeSubmit: dateCheck } ); 
});
于 2013-07-15T03:59:14.813 回答
-1 
     -    I hope this will help you : Just write this code on your Html/jsp page 
    <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            </head>

         - **Don't forget to add this on your html page**

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

            <script type='text/javascript'>
                $(document).ready(function() {
                    //option A
                    $("regF").submit(function(e) { //regF is form id
                        alert('submit intercepted');
                        e.preventDefault(e);
                    });
                });
            </script>
</html>
于 2018-12-04T10:39:26.877 回答