Question

我有一个包含如下所示字段的表单：

<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post">
    <INPUT TYPE="text" Name="name" required="yes" />
    <INPUT TYPE="text" Name="name2"  />

    <INPUT class="btn btn-primary" TYPE="button" onclick="jsSubmit();" VALUE="Submit" ID="SubmitButton1">
</form>

如果我点击提交，如果输入＆＃34;名称＆＃34;它将无法提交。是空的，这就是我想要的。

但如果我在JQuery中这样做：

function jsSubmit(){
    if(/*Some necessary validation for other fields*/){
        // submit form
        $("#testForm").submit();
    } else {
        // alert date error
        $("#msgError").html('Error');
        $("#defaultErrors").modal();
    }
}

在这种情况下，表单提交即使输入＆＃34; name＆＃34;是空的。如何让表单验证JS / Jquery中的必填字段？

由于

Answer 1

由于信息有限，我可能会以错误的方式解决这个问题，但你可以这样做：

使用jQuery.submit，以便用户在提交表单时随时调用函数。

然后，您可以阻止提交，也可以根据自定义验证继续提交。这将允许您利用默认的浏览器验证方法。

＆＃13;

jQuery("#testForm").submit(function (evt) {

  //At this point the browser will have performed default validation methods.
  
  //If you want to perform custom validation do it here.
  if (jQuery("input[Name='name']").val().length < 4) {
    alert("first Input must have 4 characters according to my custom validation!");
    evt.preventDefault();
    return;
  }
  alert("Values are correct!");

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post">
    <INPUT TYPE="text" Name="name" required="yes" minlength="3"/>
    <INPUT TYPE="text" Name="name2"  />

    <!-- Change type to submit -->
    <INPUT class="btn btn-primary" TYPE="submit" VALUE="Submit" ID="SubmitButton1"/>
</form>

＆＃13;

Answer 2

您希望将验证函数附加到表单中的onsubmit，并使验证函数返回true / false。如果它返回true，则表单将提交，如果返回false则不会。

HTML：

<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post" onsubmit="return Validation()">
    <INPUT TYPE="text" Name="name" required="yes" />
    <INPUT TYPE="text" Name="name2"  />

    <INPUT class="btn btn-primary" TYPE="submit" ID="SubmitButton1">
</form>

验证功能：

Validation() {
    ...
    return value; // value is true or false based on validation parameters
};

希望它有所帮助。干杯！

Answer 3

为什么不使用HTML5验证？如果您只想确保输入不空。这是进行基本验证的最佳方式。 https://www.w3schools.com/tags/att_input_required.asp

<form id="testForm" name="testForm" action="./test2.html" method="post" onsubmit="jsSubmit()">
  <input type="text" Name="name" required>
  <input type="text" Name="name2">

  <input class="btn btn-primary" type="submit" value="Submit" ID="SubmitButton1">
</form>

顺便说一句，您应该使用表单上的onsubmit attr来调用javascript函数。因为即使表单未验证，按钮上的onclick方法也会调用该函数。然后你必须在javascript中验证它，如果你想要一个复杂的验证，这是正确的方法。

在JQuery提交表单之前验证必填字段

3 个答案: