jQuery验证程序和datepicker单击未验证 [英] jQuery validator and datepicker click not validating

问题描述

我正在使用jquery验证程序来验证文本输入.我的问题是，如果我单击提交"，它将正确显示所有错误消息.但是，在日期选择器输入中，要清除错误消息，我必须选择两次日期选择器. IE; 1单击选择，然后正确输入数据.第二次单击以清除错误消息.

I am using jquery validator to validate text inputs. The problem I have is, if I click submit it displays all error message correctly. However, on the datepicker input, to clear the error message I have to select the datepicker twice. ie; 1 click to select and it inputs the data correctly. 2nd click to clear the error message.

我读到某处有关在日期选择器上使用"on"事件的信息，所以我尝试了一下，但没什么区别.我认为编码不正确.我假设无效类和成功类是验证器脚本的一部分.值得一试.

I read somewhere about using an 'on' event on the datepicker, so I tried that, but it made no difference. I don't think that is coded correctly. I am assuming that the invalid and success classes are part of the validator script. Worth a try.

这里可能发生什么.谢谢

What could be happening here. Thanks

密码

<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '2011:2037',
            dateFormat: 'dd/mm/yy',
            minDate: 0,
            defaultDate: null
        }).on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });

    });
</script>

html代码

<label for"datepicker">
   <input id="datepicker" name="datepicker" type="text" />
</label>

验证者相关代码

规则/消息部分

 datepicker:
    {
        required: true,
        date: true
    },

 datepicker:
    {
        required: " * required: You must enter a destruction date",
        date: "Can contain digits only"
    }

推荐答案

引用OP:

我必须选择两次日期选择器.即:单击1进行选择，它将正确输入数据.第二次单击以清除错误消息."

那是因为验证通常是在keyup和blur事件上触发的.由于您使用的是日期选择器而不是键盘来与字段进行交互，因此会干扰正常的触发事件.

That's because validation is normally triggered on keyup and blur events. Since you're using a date-picker to interact with the field, rather than the keyboard, you're interfering with the normal triggering events.

您的代码本来可以弥补的，但是却太过致命了……

Your code is supposed to compensate, but is over-kill...

$(function() {
        $("#datepicker").datepicker({ ... })
.on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });
    });

只要值更改，您只需在字段上调用.valid()方法.

You only need to call the .valid() method on the field whenever the value changes.

$(function() {
    $("#datepicker").datepicker({ ... })
        .on('changeDate', function(ev) {
            $(this).valid();  // triggers the validation test
            // '$(this)' refers to '$("#datepicker")'
        });
});

但是，这与您之前的基本相同.

However, this is basically the same as you had before.

changeDate应该是什么?这是您的datepicker插件定义的吗?这不是标准的jQuery事件，因此很可能是整个问题.尝试使用标准的change事件....

What is changeDate supposed to be? Is this something defined by your datepicker plugin? That's not a standard jQuery event, so likely the whole problem. Try the standard change event instead....

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
    }).on('change', function() {
        $(this).valid();  // triggers the validation test
        // '$(this)' refers to '$("#datepicker")'
    });
});

这篇关于jQuery验证程序和datepicker单击未验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！