Question

我在我的应用程序中有这个表单，我将通过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>

Answer 1

如果您正在使用HTML5验证，如果您按下submit类型的按钮，则不会让提交表单数据无效。

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

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

调用一个函数saveForm()，所以在该函数中，在发送AJAX请求之前，做任何你需要的额外JS验证，然后return如果你认为它无效

Answer 2

不，您无法在未提交的情况下验证所有字段，您只能在每个文本字段的Onblur上触发验证。

Answer 3

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

Answer 4

您可以使用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');

});

请参阅{{3}}

Answer 5

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

在MDN上，表单验证有interesting article。

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

知道你想要完成的任务会很有帮助。

如何在不提交表单的情况下触发标准HTML5表单验证？

5 个答案: