Validate Html 5 input without form tag?

Question

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?

Answer 1

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!