Question

我正在尝试使用HTML5验证数字输入。我正在使用jQuery来创建元素。如何让浏览器显示错误消息onBlur而无需单击提交按钮？

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

Answer 1

设置.blur（）处理程序。请参阅here。

Answer 2

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

沿着这些方向的东西

Answer 3

实际上，您无法通过API调用本机验证ui。由于验证ui自动也集中了元素，这不是一个好的可用性（用户不能让字段无效并决定在页面上做其他事情）。

如果要执行此操作：必须使用validity属性和validationMessage属性实现验证yourslf。代码可能如下所示：

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

当然使用警报，有点愚蠢，但使代码干净。如果你想使用webshims lib，那就有一个showError帮助器。我提出了demo here

关于帮助方法$ .webshims.validityAlert.showFor：

showFor需要dom元素jQuery对象或选择器作为第一个参数。验证消息作为可选秒最后一个是布尔值，它将显示消息而不聚焦该字段。

模糊的单个输入验证

3 个答案: