Question

I am building a backend database UI for a business website and have some forms that include a couple of date fields. I am using the jQueryUI datepicker on them (dateFormat: ‘dd/mm/yyyy’) but it is also possible to type in the date into the input field so I also want to validate the input (I am aware there is another plugin for validating datepicker fields but I’d like to avoid introducing more plugins is possible).

I have been researching working around the issue with Chrome’s locale settings and think I have that solved but I also have a different problem that I have not seen mentioned in any other post.

My client is most likely going to access this with Chrome which does not validate the date in this format, so I am using dateITA from the additional-methods.js file that comes with the validate plugin.

function validate_newjob() {
$('#newjob').validate({
        rules: {
            DueDate: {
                required: true,
                dateITA: true 
            }
        },
        messages: {
            DueDate: {
                required: "* Required",
                dateITA: "Date format dd/mm/yyyy"
            }
        },
        errorClass: "formerror",
        errorElement: "span",
        errorPlacement: function(error, element) {
            $(element).next().after(error);
        }
    });
}

This works fine. The date validates using my message “Date format dd/mm/yyyy” when it errors.

Example: I start typing 8/8/2012 and as I type the error message is displayed “Date format dd/mm/yyyy” then when I finish typing the date the field validates with success.

But something strange is also happening. If I begin typing a date like 18/12/2012 the built in date: true validation method kicks in and issues the default error “Please enter a valid date.” (because the value for day 18 doesn’t pass the validation script)

When using the dateITA additional method, how do I stop the default date method from validating the field and giving me a false negative?

Answer 1

Answered my own question…

I had a class=”date” assigned to the field (just for my css) that appears to automatically trigger the date method.