如何在不提交表单的情况下触发标准 HTML5 表单验证？ [复制]答案

【问题标题】：How to trigger standard HTML5 form validation without submitting the form? [duplicate]如何在不提交表单的情况下触发标准 HTML5 表单验证？ [复制]
【发布时间】：2017-05-20 13:16:55
【问题描述】：

我的应用中有这个表单，我将通过 AJAX 提交它，但我想使用 HTML5 进行客户端验证。所以我希望能够通过普通的 HTML 字段强制表单验证。

我想在不提交表单的情况下触发验证。有可能吗？

HTML 代码示例

<form id="frm" class="form-horizontal form-label-left">
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="both name(s) e.g Jon Doe" required="required" type="text">
  </div>

  <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
      <button id="send" type="button" class="btn btn-success" onclick="saveForm()">Submit</button>
    </div>
  </div>
</form>

<hr />
<button id="checkValidity">Check Validity</button>

【问题讨论】：

顺便说一句，客户端验证是为了方便客户端使用，但您还需要服务器端验证，因为那是为了安全。客户端可以更改您为使用 HTML5 进行验证的任何内容并向您发送无效信息。你想确保你也抓住了这个。 :)

标签： javascript jquery html ajax forms

【解决方案1】：

这是可能的，但你为什么要这样做？如果您想更改样式或显示错误消息，可以使用 CSS。

在 MDN 上有一个 interesting article 用于表单验证。

如果是关于样式的，您可以使用 :invalid 伪类。

了解您要完成的工作会很有帮助。

【讨论】：

欢迎来到 Stack Overflow！请仅将发布答案按钮用于实际答案。拥有enough rep 后，您就可以将 cmets 添加到问题中。

【解决方案2】：

您可以使用checkValidity() 方法手动检查表单有效性，该方法也会为表单中的每个无效元素引发invalid 事件：

$('#checkValidity').click(function() {

    // register named event handler for further removal
    $('input:invalid').on('invalid.temp', function(e) {
        // input is invalid
    });

    // trigger validation
    frm.checkValidity();

    // remove event handlers
    $('input:invalid').off('invalid.temp');

});

见Fiddle

【讨论】：

【解决方案3】：

不，如果您想使用required 属性进行表单验证，那么您需要提交表单。您可以做的另一件事非常冗长，是在所有输入元素上设置 onblur 和 onfocus 侦听器，并使用 javascript 验证表单。这很长，但提供了更好的用户体验，因为验证是即时进行的，而不是在提交时结束。

【讨论】：

【解决方案4】：

不，您无法在不提交的情况下验证所有字段，您唯一能做的就是触发每个文本字段的 Onblur 验证。

【讨论】：

【解决方案5】：

如果您使用 HTML5 验证，如果您为按钮提供 submit 类型（如果有一些无效数据），它不会让您提交表单。

此外，您似乎不需要使用其他方法来提交表单。您的按钮：

<button id="send" type="button" class="btn btn-success" onclick="saveForm()">Submit</button>

调用一个函数saveForm()，所以在那个函数中，在你发送你的AJAX请求之前，做任何你想要的额外的JS验证，然后如果你发现它是无效的，就提早return

【讨论】：