jQuery验证器和日期选择器点击不验证

Question

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

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

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

脚本代码

<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 次单击选择并正确输入数据。第 2 次单击以清除错误消息。”

这是因为验证通常在 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 this，即：

    .on('change', function() {
        $(this).valid();  
    });

这只是让它更笼统一点.. -D

Answer 3

如果您使用的是 Jquery 表单验证器(http://www.formvalidator.net/) 并且您想使用 bootstarp datepicker 然后只需将 class="hasDatepicker" 添加到输入元素。它对我有用。

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