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

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>

如果我点击“提交”，如果输入的“名称”为空，则不会提交，这正是我想要的。

但是如果我在 JQuery 中这样做:

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

在这种情况下，即使输入“名称”为空，表单也会提交。如何使表单验证 JS/Jquery 中的必填字段？

谢谢

Answer 1

由于信息有限，我可能会以错误的方式处理这个问题，但是你可以这样做:

使用 jQuery.submit，以便每次用户提交表单时都会调用您的函数。

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

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!");

});

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