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

【问题标题】：Validate required fields before JQuery submit form在 JQuery 提交表单之前验证必填字段
【发布时间】：2017-09-01 17:33:57
【问题描述】：

我有一个包含如下必填字段的表单：

<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 中的必填字段？

谢谢

【问题讨论】：

document.getElementById('nameInput').value.trim().length !== 0 如果您在 if 语句中为输入提供 nameInput 的 id。
浏览器自动提示，如果我不要求通过JQuery提交表单，该字段不能为空。我可以保留此验证通过 JQuery 提交表单吗？
是的，通过编写您自己的验证规则；)

标签： javascript jquery html forms

【解决方案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>

【讨论】：

【解决方案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
};

希望对您有所帮助。干杯！

【讨论】：

【解决方案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 属性来调用 javascript 函数。因为即使表单未验证，按钮上的 onclick 方法也会调用该函数。然后你必须在 javascript 中验证它，如果你想要一个复杂的验证，这是正确的方法。

【讨论】：

可能是因为 required 属性在 iOS 10 之前的版本上不起作用