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);
});
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('input').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});
<!-- language: lang-css -->
label{
display: block;
}
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>URL
<input id ="theurl" type="url">
</label><br>
<label>Email
<input id ="theemail" type="email">
</label><br>
<button> Submit</button>
</form>
<!-- end snippet -->
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][1].
[1]: http://jsfiddle.net/robertc/4Hk9G/
