CODEWITHSUNDEEP
javascriptjqueryhtml
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 34054

Validate Html 5 input without form tag?

Is it possible to trigger browser built-in html 5 validation process without form tag? I want to show the browser error messages if my input control is invalid without using form tag. I know I can check validation using checkValidity function but how to tell browser to trigger validation process?

Upvotes: 10

Views: 20779

Answers (3)

cornzz
cornzz

Reputation: 91

This is absolutely possible using .reportValidity(), not sure why the other answers said it isn't. An example to check all inputs for validity:

document.querySelectorAll('input').forEach(e => e.reportValidity())

Upvotes: 3

Jesus Ken
Jesus Ken

Reputation: 11

Later, but it can be help to news search.

You can use

$(elem)[0].reportValidity()

Upvotes: -2

Asterisk Loftis
Asterisk Loftis

Reputation: 86

I agree with CBroe , I'm not sure you can use HTML5 form validation without a actual form.. I've found this link and it should be of some use to you:

https://stackoverflow.com/a/7562439/4092442

You can't trigger the native validation UI, but you can easily take advantage of the validation API on arbitrary input elements:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

The first event fires checkValidity on every input element as soon as it loses focus, if the element is invalid then the corresponding event will be fired and trapped by the second event handler. This one sets the focus back to the element, but that could be quite annoying, I assume you have a better solution for notifying about the errors. Here's a working example of my code above. If that does not help, perhaps you can get creative and create a form, that doesn't look like a form. Hide the submit button etc. That way you can take advantage of the functionality.

Also, maybe provide a little more explanation as to what it is you're trying to accomplish. I have personally found that helps people offer detailed solutions. Solutions I often never even considered. :) Hope this helps!

Upvotes: 7

Related Questions