Use HTML 5 validation messages with jQuery Validate plugin

Question

I've got a relatively simple form that I need to conditionally submit, and show validation messages if HTML5 validation is not passed.

I'm down the road of using jQuery Validate, which seems fine, but all I want is the functionality of

if( $('#myForm').valid()) {...}

jQuery Validate seems determined to put error messages in the DOM though and block the browsers native messages, which I don't want. I don't know if I'm being blind or dumb (probably both) but I can't figure out how to stop it doing that.

This is what I have now:

// call validate to set the form up for validation
$(this).closest('form').validate();

if ($(this).closest('form').valid()) {
    // do some stuff
} else {
    // show error messages via the browser (need to pretend to click a button for this)
    $(this).closest('form').find(':submit').click();
}

Answer 1

There's no logical reason anybody should want to do HTML 5 validation while also using the jQuery Validation plugin.

The plugin dynamically disables all HTML 5 validation by adding a novalidate attribute to the form , and there's nothing you can do about that without modifying the source code.

I suppose you could leverage jQuery to remove the novalidate attribute from the <form> element. Just be sure to do this after you've called .validate() .

$('#myform').removeAttr('novalidate');

However, the plugin will not have any connection to the error messages and the HTML 5 messages will behave independent of the plugin.

You can also use the errorPlacement option to over-ride the default message placement behavior, which keeps the plugin operational, but will suppress the error messages entirely.

$('#myform').validate({
    errorPlacement: function() {
        return false;
    }
});

One final hurdle you will not be able to overcome is that the jQuery Validate plugin, once initialized, cannot be disabled or toggled on/off.

---

Quote OP :

"but all I want is the functionality of if( $('#myForm').valid()) ..."

As you already know, the .valid() method is part of the jQuery Validate plugin. So you cannot use it without using the jQuery Validate plugin. In other words, you cannot use this method to test HTML 5 validation. AFAIK, there is no available JavaScript method to manually trigger or test the form with HTML 5 validation. HTML 5 validation is simply built into the browser and controlled with HTML 5 attributes... it's very simple and it's not JavaScript. Typically, if you need more complex client-side control than what's made available by the browser, you'd use JavaScript. So in this case, you'd just go all the way with jQuery Validate. Whatever it's doing that you don't like, you'd need to overcome using jQuery techniques, not HTML 5.

Quote OP :

"jQuery Validate seems determined to put error messages in the DOM though and block the browsers native messages, which I don't want."

Yes, it's determined to block the browser's HTML 5 error messages because you've installed a jQuery plugin to handle validation. If you'd rather have HTML 5 validation messages, then you shouldn't use the jQuery Validation plugin. And if you really don't want DOM manipulation, then you shouldn't use jQuery as this is one of its primary purposes. This is loosely analogous to saying you don't want to use electricity but you still somehow want your electric bulbs to light up.

---

If you're just looking to make the error messages more attractive, then I'll suggest a jQuery plugin like Tooltipster or qTip2 properly integrated with the jQuery Validate plugin, instead of some complicated conditional mash-up of HTML 5 and jQuery.

DEMO: http://jsfiddle.net/2DUX2/3/

How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

---

Remember, jQuery Validate will work properly and more consistently in far more browser versions than HTML 5 validation, which depends solely on how each browser handles/styles its HTML 5 validation messages.