How to trigger standard HTML5 form validation without submitting the form?

Question

I have this form in my app and I will submit it via AJAX, but I want to use HTML5 for client-side validation. So I want to be able to force the form validation, via normal HTML field.

I want to trigger the validation without submitting the form. Is it possible?

HTML Code Example

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

Just a side note, client side validation is used for convenience for the client, but you also need server side validation because that is used for security. The client can change anything you have for validation with HTML5 and send you invalid information. You want to make sure you catch this too. :) — Loaf, Jan 05 '17 at 20:53

score 1 · Answer 1 · answered Jan 05 '17 at 20:52

If you're using HTML5 validation, it won't let you submit the form if you give your button a submit type if there's some invalid data.

Also, it doesn't look like you don't need to use another method to submit the form. Your button:

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

calls a function saveForm(), so in that function, before you send your AJAX request, do any extra JS validation you want and then return early if you see it's invalid

score 1 · Answer 2 · answered Jan 05 '17 at 21:08

You can manually check form validity using the checkValidity() method that is also raising the invalid event for each of the invalid elements in your form:

$('#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');

});

See Fiddle

score 1 · Answer 3 · answered Jan 05 '17 at 21:34

1

It is possible but why do you want to do it? If you want to change style or display an error message you can do so with CSS.

On MDN there is an interesting article on form validation.

If it's about styling you can use the :invalid pseudo class for example.

It would be helpful to know what you are trying to accomplish.

answered Jan 05 '17 at 21:34

meinaart

107
4

Welcome to Stack Overflow! Please use the *Post answer* button only for actual answers. Once you have [enough rep](https://stackoverflow.com/help/privileges/comment) you'll be able to add comments to the question. – Heretic Monkey Jan 05 '17 at 21:47

score 0 · Answer 4 · answered Jan 05 '17 at 20:54

0

No, you can't validate all the fields without submitting, only thing you can do is to trigger validation on Onblur of each of the text fields.

answered Jan 05 '17 at 20:54

score 0 · Answer 5 · answered Jan 05 '17 at 21:04

No if you want to use, the required attribute for form validations then you need to submit the form. The other thing you can do which is very lengthy is have onblur and onfocus listeners on all input elements and validate the form with javascript. This is lengthy but gives a better user experience, as validation occurs on the fly and not at the end while submitting.

How to trigger standard HTML5 form validation without submitting the form?

5 Answers5