Question

我正在使用jquery验证器来验证文本输入。我遇到的问题是，如果我单击提交它会正确显示所有错误消息。但是，在datepicker输入上，要清除错误消息，我必须选择两次datepicker。即; 1单击以选择并正确输入数据。第二次单击以清除错误消息。

我在某处读过关于使用＆＃39; on＆＃39;在datepicker上的事件，所以我尝试了，但它没有任何区别。我认为没有正确编码。我假设无效和成功类是验证器脚本的一部分。值得一试。

这里可能会发生什么。感谢

Sciprt代码

<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"
    }

Answer 1

引用OP：

“我必须选择两次日期选择器。即; 1点击选择并正确输入数据。第二次点击清除错误信息。”

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

你的代码应该补偿，但是过度杀戮......

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

每当值发生变化时，您只需要在字段上调用.valid()方法。

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

然而，这基本上和以前一样。

changeDate应该是什么？这是由你的datepicker插件定义的吗？那不是标准的jQuery事件，很可能是整个问题。请尝试标准change事件....

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

Answer 2

Sparky的回答对我来说很有用，我唯一要改变的是使用id，我只是在on函数中使用了jquery，即：

{{1}}

这只是让它更通用一点.. -D

Answer 3

如果您使用的是Jquery Form Validator（http://www.formvalidator.net/）并且你想使用bootstarp datepicker然后只需添加class =＆＃34; hasDatepicker＆＃34;输入元素。它对我有用。

<input type="text" name='birth_date' class="form-control hasDatepicker" id="datepicker" value=""  data-validation="birthdate" data-validation-format="mm/dd/yyyy">

jQuery验证器和datepicker点击不验证

3 个答案: