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

can over ride `errorPlacement` option if you don't want plugin to display errors, or use css to hide them — charlietfl, Sep 11 '14 at 15:50
I could probably hide them with CSS, but it seems to be overriding the browsers error messages (at least in chrome) — Craig, Sep 11 '14 at 15:55
could be adding `novalidate` to form. Have never tried to over ride html5 with the validation plugin. Not sure if it has an html5 over ride or not, some other plugins do — charlietfl, Sep 11 '14 at 15:59
Yes, @charlietfl, this plugin dynamically adds the `novalidate` attribute to the `form`. — Sparky, Sep 11 '14 at 16:03
aha! It is. Hopefully there's a clean way/option to disable this functionality. Would rather it not insert stuff into the DOM too. — Craig, Sep 11 '14 at 16:03
No Craig, you cannot disable this option. Most people happily use the plugin as designed. Nearly all jQuery plugins manipulate the DOM in some fashion... if you don't want DOM manipulation, then don't use jQuery. — Sparky, Sep 11 '14 at 16:04

score 3 · Answer 1 · edited May 23 '17 at 11:47

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.

I think I was pretty clear in that I want to check if a form is valid using javascript and then kick off some other code accordingly, otherwise use HTML5 validation. From searching it seems that the best/only way to do this is by using jQuery validate. If there is an alternative I would use that. Thanks for coming down so aggressively on what I thought was a simple and reasonable thing to want to do though. — Craig, Sep 12 '14 at 09:42
@Craig, In the thousands of jQuery Validate questions on SO, none ask for anything like this. Yes, the request is clear, however, you never explained the true purpose of this request. My very detailed response gives you some code to help figure this out, a few technical explanations, an alternative solution, and very plain talk that was only intended to save you some serious grief in the long run. I'm sorry you mistook my thoroughness as aggression. — Sparky, Sep 12 '14 at 15:47

Use HTML 5 validation messages with jQuery Validate plugin

1 Answers1