Individual Input Validation on Blur

I'm trying to use HTML5 to validate a number input. I am using jQuery to create the elemen开发者_如何学Pythont. How can I have the browser display the error message onBlur without having to click the submit button?

jQuery(document.createElement('input')).attr({"type":"number","min":"0","max":"60","step":"1","value":"5"});

Set up a .blur() handler. See here.

jQuery(document.createElement('input')).attr({"type":"number","min":"0","max":"60","step":"1","value":"5"}).blur(function(){
    var val = parseInt(jQuery(this).val(),10);
    if(val < parseInt(jQuery(this).attr('min'), 10))
        jQuery(this).val(parseInt(jQuery(this).attr('min'), 10)); // Set value to min
    if(val > parseInt(jQuery(this).attr('max'), 10)){
       jQuery(this).val(parseInt(jQuery(this).attr('min'), 10)); // Set value to max
});

Something along those lines

Actually, you can't invoke the native validation ui through an API. Due to the fact, that the the validation ui automatically also focuses the element, this would not be a good usability (user can't leave field invalid and decide to do something else on the page).

If you want to do this: you have to implement the validation yourslf using the validity property and the validationMessage property. The code could look like this:

$('input[type="number"]').blur(function(){
    //if field is validation candidate and is invalid alert the validationmessage
    if( $.prop( this, 'willValidate' ) && !$.prop( this, 'validity').valid){
        alert( $.prop( this, 'validationMessage' );
    }
});

Of course using an alert, is a little bit stupid, but makes the code clean. If you want to use webshims lib, there is a showError helper. I have put up a demo here

About the helper method $.webshims.validityAlert.showFor:

showFor requires a dom element jQuery object or selector as first argument. the validationmessage as optional second and the last is a boolean, which will show the message without focusing the field.