jQuery validator and datepicker click not validating

Question

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

Your question is very lacking. Where is the rest of the call to .validate()? Since you're using a date picker, why do you need the date rule? Which datepicker plugin?? What is the changeDate event supposed to be? — Sparky
– Sparky, Commented Mar 11, 2014 at 22:52

Sparky · Accepted Answer · 2015-12-15 17:28:39Z

59

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

edited Dec 15, 2015 at 17:28

answered Mar 11, 2014 at 22:51

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vignesh Subramanian Over a year ago

it says .valid() is not a function. What should i do?

Sparky Over a year ago

@vignesh. You should include the jQuery Validate plugin! Since .valid() is a method of this plugin, the error means you have not properly included it.

kokosda Over a year ago

It should be noticed that datepicker.onSelect actually worked for me.

Sparky Over a year ago

@sanojlawrence, you cannot attach .validate() to anything other than the form object. $(this).parsley() does not represent your form. Please do not start entirely new questions in comments.

dnrayzn · Accepted Answer · 2015-11-03 20:57:51Z

8

Sparky's answer worked great for me, the only thing I would change is instead of using the id, I just used the jquery this in the on function, ie:

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

That just makes it a little more general.. -D

answered Nov 3, 2015 at 20:57

dnrayzn

1261 silver badge5 bronze badges

1 Comment

Sparky Over a year ago

Incorporated this suggestion into my answer.

Suraj Chougule · Accepted Answer · 2016-08-30 06:11:33Z

4

If you are using Jquery Form Validator(http://www.formvalidator.net/) and you want to use bootstarp datepicker then just add class="hasDatepicker" to input element.It worked for me.

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

answered Aug 30, 2016 at 6:11

Suraj Chougule

694 bronze badges

1 Comment

Sparky Over a year ago

Except that this whole question is about a completely different plugin. jQuery Form Validator is not the jQuery Validate plugin. Please pay attention to the tags on the question, which clearly direct you to the plugin being asked about.

Collectives™ on Stack Overflow

jQuery validator and datepicker click not validating

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related