Question

I have a weird bug with JQuery Validate and a custom method. For some reason, the validate method fires 3-4 times every time the field is changed. It’s looping for some reason, and I have no idea why. The validator works. The only problem is that it is not working with datepicker. I have to click twice in the datepicker to get the value in the input to change. It seems like jquery validate is hijacking the datepicker input, or something. I’m clueless at this point and will entertain any ideas.

The custom method:

$(document).ready(function () {

    $.validator.addMethod("laterDate", function(value, element) {   
       var id = "#" + element.id;
       var id_number = element.value.charAt(element.length - 1);
            alert(id_number);
       if(id_number == "1"){
            alert("in if")
            var id_value = $(id).fieldDate();
            var today = new Date();
                alert(id_value > today);
                return id_value > today;
      }
        else{
        alert("in else")
        var prev_id_number = String(parseInt(id_number) - 1);
        var prev_id = "#end_date_" + prev_id_number;
        var prev_id_value = $(prev_id).fieldDate();
        var id_value = $(id).fieldDate();
        return id_value > prev_id_value;
      }

    }, $.format("Enter a later date"));
});

The validator code is:

$(document).ready(function () {
    $("#rate_new_new").validate({
        debug: true,

rules: {
                "rates[start_date_1]": {dateITA: true, maxlength: 50},
                "rates[end_date_1]": {dateITA: true, maxlength: 50, laterDate: true},
                "rates[price_1]": {testPrice: true}
                },
    messages: {

        "rates[start_date_1]": {
            dateITA: "Please enter a valid date",
            maxlength: "The name must be less than 50 characters"

        }
    },      

    submitHandler: function(form) {

                $(form).ajaxSubmit({

                        success: function(){
                          $('#lefttabs li:eq(4) a').tab('show');
                                            }
                                  });


                                  }
 });
 });

Answer 1

Are you using JqueryUIDatePicker?

Than, try this:

$('#yourid').datepicker({
    onSelect: function(dateText, inst) {
        $(this).blur();
    }
});