jquery execute native browser validation

Question

How to execute the native browser form validation using jquery / javascript as if the user is trying to submit the form?

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

yes, modern browsers outline invalid form's field and display a warning message. did i explain it? — Michele, Jan 16 '13 at 18:11
Take a look at [this](http://stackoverflow.com/a/5688798/1558311) answer — Viktor S., Jan 16 '13 at 18:14
HTML5 form validation is probably a more proper name for it, he's just making fun of what you called it. — Kevin B, Jan 16 '13 at 18:14
@FAngel using just $("myform").submit(); from external button native validation dosen't run — Michele, Jan 16 '13 at 18:26

score 3 · Answer 1 · answered Mar 14 '14 at 09:53

My example with 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
    })
})

score 2 · Answer 2 · answered Jan 16 '13 at 18:54

See this demo: http://jsfiddle.net/3JeZ6/10/

Here is an HTML for it:

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

That is crazy, as for me, but simple form.submit() really does not work. But, if you trigger a click on a submit button - everything works fine:

$("#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
})

I've confirmed following behavior in latest Chrome and FireFox

score -1 · Answer 3 · answered Jan 16 '13 at 18:27

You could iterate over the inputs and check if they're valid.

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

    });
});

http://jsfiddle.net/sWxE9/

jquery execute native browser validation

3 Answers3