user1532468 user1532468 - 3 months ago 16
jQuery Question

jQuery validator and datepicker click not validating

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.

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

Sciprt code

<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 code

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


validator relevant code

Rules/Message section

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

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

Answer

Quote OP:

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

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

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.

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