jQuery验证器和日期选择器单击“不验证”

Question

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

我在某个地方读到关于在日期选择器上使用'on'事件，所以我尝试了一下，但没有什么不同。我觉得编码不对。我假设无效类和成功类是验证器脚本的一部分。值得一试。

这里可能会发生什么?由于

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

Quote OP:

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

这是因为验证通常在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应该是什么?这是由你的日期picker插件定义的吗?这不是一个标准的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/)你想使用启动日期picker，然后只需添加class="hasDatepicker"输入元素。

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