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>

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>

• javascript
• jquery
• html
• forms
• validation

Share Improve this question Follow edited Jan 16, 2013 at 18:27 Michele asked Jan 16, 2013 at 18:09 MicheleMichele 1,48833 gold badges2424 silver badges5454 bronze badges 5

• Define "... native warning system..."? :) – Alexander Commented Jan 16, 2013 at 18:10
• 1 yes, modern browsers outline invalid form's field and display a warning message. did i explain it? – Michele Commented Jan 16, 2013 at 18:11
• Take a look at this answer – Viktor S. Commented Jan 16, 2013 at 18:14
• 2 HTML5 form validation is probably a more proper name for it, he's just making fun of what you called it. – Kevin B Commented Jan 16, 2013 at 18:14
• @FAngel using just $("myform").submit(); from external button native validation dosen't run – Michele Commented Jan 16, 2013 at 18:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

See this demo: http://jsfiddle/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

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