Question

我正在验证以下功能中的日期。如果验证失败，则表单不应提交。我尝试在提交表单中返回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>

Answer 1

只是评论：

如果您的侦听器传递了对表单的引用，则可以按名称或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;
}

Answer 2

我感谢上面的所有贡献。我刚刚应用了上述建议来解决我的挑战和问题。它工作正常。保持简单我使用以下内容：

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

Answer 3

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();

}

Answer 4

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

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

Answer 5

在表单标签属性onsubmit =“ return validateForm（）”中的onclick属性上使用return，如果您在javascript的验证函数中返回false，并且输入不正确，则必须添加返回您的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>

Answer 6

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

Answer 7

你可以使用jQuery Form Plugin来实现同样的目标。

$(document).ready(function() { 

    $('#your_form_id').ajaxForm( { beforeSubmit: dateCheck } ); 
});

如果验证失败，则停止表单提交。

7 个答案: