Question

如何使用jquery / javascript执行本机浏览器表单验证，就好像用户正在尝试提交表单一样？

<form id="myform">
    <input type="text" name="myinput" required />
    <input type="email" name="myemail" required />
</form>

<div id="externalcheck">click to validate</div>

<script type="text/javascript">
   $("#externalcheck").click(function(){
     // how to run html5 browser's validation ?
   });
</scrpipt>

Answer 1

我用ajax的例子。

var $form = $('form');

$form.find(':submit').on('click', function (evt) {
    // If the validation fails, return true and the form is processed as standard
    if($form[0].checkValidity() === false) {
      return true;
    }

    evt.preventDefault();

    $.post('/', $form.serialize(), function (response) {
        // Handling the response
    })
})

Answer 2

请参阅此演示：http://jsfiddle.net/3JeZ6/10/

这是一个HTML：

   <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
   </style>       
   <form id="testform" action="/">
      <label>Required:
        <input id="required_input" required="">
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input id="pattern_input" pattern="[0-9][A-Z]{3}">
      </label><br>
      <label>Min (4):
        <input id="min_input" type="number" min="4">
      </label><br>
        <input type="submit" value="Submit Button" id="sbmt" />
    </form>
    <input type="button" value="Trigger click on submit button" id="test">
    <input type="button" value="Trigger form submit" id="test1">
    <input type="button" value="Run checkValidity" id="test2">

对我来说，这很疯狂，但简单的form.submit()确实不起作用。但是，如果您触发单击提交按钮 - 一切正常：

$("#test").click(function(){
  $("#sbmt").click(); // works fine
})
$("#test1").click(function(){
  $("#testform").submit();// does not work 
})
$("#test2").click(function(){
  alert($("#testform")[0].checkValidity() ? "valid": "not valid"); // result looks to be correct, but it does not highlight fields that are not valid
})

我在最新的Chrome和FireFox中确认了以下行为

Answer 3

您可以迭代输入并检查它们是否有效。

$("#externalcheck").click(function () {
    $('#myform input').each(function () {
        if (!this.checkValidity()) {
            alert($(this).prop('name') + ' is not valid');
        }

    });
});

http://jsfiddle.net/sWxE9/

jquery执行本机浏览器验证

3 个答案: