validationengine date validation using multiple fields

Question

I have a form to collect the user's contact info, and this form is using 3 fields for date of birth.

I'm using Jquery UI's Datepicker for selecting the date and ValidationEngine (source here and original developer here) for form validation.

I want to be sure the date is correct before the I submit the form.

score 0 · Answer 1 · edited May 23 '17 at 10:25

I'd suggest using the latest version of the validationengine plugin. From their Github readme page:

The ValidationEngine with a datepicker

Using a datepicker with the engine is problematic because the validation is bound to the blur event. since we lose the focus before any data is entered in the field it creates a weird bug. Fortunately we implemented a fix that uses a delay during the datepicker binding.

To use this mode you need to add the class datepicker to your input, like this:

<input type="text" id="req" name="req" class="validate[required] text-input datepicker" value="">

That should make sure that the date field validates. I suspect that in your case you also want to validate that the date is an actual valid date, so you would add the custom date check to the validate part of the class:

<input type="text" id="req" name="req" class="validate[required,custom[date]] text-input datepicker" value="">

You don't say whether you need to validate the date in a format different to validationengine's default ISO YYYY-MM-DD, but if you do then I suggest you look at this stackoverflow thread which solves this exact question, seemingly for validationengine.

score 0 · Answer 2 · answered Mar 15 '14 at 12:39

$("#date_from_disp").datepicker({ changeYear: true , changeMonth: true, dateFormat: 'mm/dd/yy', altField: '#date_from' , altFormat: 'yy-mm-dd' ,yearRange: '2010:$cur_year',
            onSelect: function() { 
                $('.date_from_dispformError').hide();
            } 
    });

    $("#date_till_disp").datepicker({ changeYear: true , changeMonth: true, dateFormat: 'mm/dd/yy', altField: '#date_till' , altFormat: 'yy-mm-dd' ,yearRange: '2010:$cur_year',
    onSelect: function() { 
                $('.date_till_dispformError').hide();
            } 
    });

View full code at : http://rosevinod.wordpress.com/2014/03/15/validationengine-date-validation-using-multiple-fields/

validationengine date validation using multiple fields

2 Answers2

The ValidationEngine with a datepicker