Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 11 down vote favorite
5

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 javascript/jquery. Is it possible?

EDIT*

I want to trigger the validation without submitting the form.

share|improve this question
Can you specify at which point would you like to validate the form? What triggers the validation? Do you want to validate each field when user types, enters/leaves field, changes value? – Peter Pajchl Aug 8 '12 at 21:12
I would like to be possible to do something like that: $("#my_form").triggerHtml5Validation() – razenha Aug 8 '12 at 21:29

4 Answers

up vote 14 down vote accepted

To check whether a certain field is valid, use:

$('#myField')[0].checkValidity() // returns true/false

To check if the form is valid, use:

$('#myForm')[0].checkValidity() // returns true/false

If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:

var $myForm = $('#myForm')
if (!$myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.submit()
}

Hope this helps. Keep in mind that HTML5 validation is not supported in all browsers.

share|improve this answer
No, I want to trigger the validation without submitting the form. – razenha Aug 8 '12 at 17:39
I tried your solution, but it still submit the form when $myForm.submit() line is executed. – Yashpal Singla Nov 29 '12 at 6:21
2  
Try replacing $myForm.submit() with $myForm.find(':submit').click() – Abraham Dec 1 '12 at 17:18
Abraham is correct. You have to actually click the submit button (programmatically). Calling $myForm.submit() will not trigger the validation. – Kevin Tighe Mar 27 at 18:06
up vote 4 down vote

You speak of two different things "HTML5 validation" and validation of HTML form using javascript/jquery.

HTML5 "has" built-in options for validating a form. Such as using "required" attribute on a field, which could (based on browser implementation) fail form submission without using javascript/jquery.

With javascrip/jquery you can do something like this

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});
share|improve this answer
I want to trigger the validation without submitting the form. – razenha Aug 8 '12 at 17:38
   
As per your update - I still think this is correct solution. You didn't specify how do you want to trigger the triggerHtml5Validation() function. The above code will attach submit event to your form; on submit you intercept the event and validate the form. If you never ever want to submit the form, simply return false; and the submit will never occur. – Peter Pajchl Aug 8 '12 at 22:42
up vote 0 down vote

I found this solution to work for me. Just call a javascript function wlike this: action="javascript:myFunction();" Then you have the html5 validation... really simple :-)

share|improve this answer
up vote 0 down vote

Here is a more general way that is a bit cleaner:

Create your form like this (can be a dummy form that does nothing):

<form class="validateDontSubmit">
...

Bind all forms that you dont really want to submit:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Now lets say you have an <a> (within the <form>) that on click you want to validate the form:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Few notes here:

  • I have noticed that you don't have to actually submit the form for validation to occur - the call to checkValidity() is enough (at least in chrome). If others could add comments with testing this theory on other browsers I'll update this answer.
  • The thing that triggers the validation does not have to be within the <form>. This was just a clean and flexible way to have a general purpose solution..
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.