jQuery Validate add Method dynamically

Question

I have a form that uses jQuery validate, but the form is generated dynamically and I am trying to add an additional method for validating whether a date is before another, if that date has been used before.

The HTML is the following (with the names generated dynamically):

<div class="form-group">
    <label class="control-label col-md-2">Read Date</label>
    <div class="input-group col-md-4 date date-picker" data-date-format="dd/mm/yyyy">
            <div class="input-icon right">
                    <i class="fa"></i>
                    <input type="text" class="form-control insert-val" readonly="" name="datepicker_16" aria-required="true" aria-invalid="false">
            </div>
            <span class="help-block">Enter the date of the reading</span>
            <span class="input-group-btn">
                    <button class="btn default" type="button" style="margin-top: -18px;"><i class="fa fa-calendar"></i></button>
            </span>
    </div>
    <input type="hidden" name="prevdate_16" class="form-control prev-date" value="29/05/2015">

With the following jQuery to validate the date field:

$('#readingForm .insert-val').each(function(){

    var prevDate = $(this).parents('.form-group').find('.prev-date').val();

    var useLTD = true;

    if(prevDate !== ''){

        $.validator.addMethod("less_than_date", function(value, element) {

            var curDate = value;

            var curarr = curDate.split('/');
            var curDay = curarr[0];
            var curMonth = curarr[1];
            var curYear = curarr[2];

            var ncurDate = new Date();
            ncurDate.setFullYear(curYear, curMonth-1, curDay);

            var prevarr = prevDate.split('/');
            var prevDay = prevarr[0];
            var prevMonth = prevarr[1];
            var prevYear = prevarr[2];

            var nprevDate = new Date();
            nprevDate.setFullYear(prevYear, prevMonth-1, prevDay);
            return ncurDate <= nprevDate;

        }, "The reading date must be greater than the previous reading date.");

    } else {
        useLTD = false;
    }

    $(this).rules( "add", {
        required: true,
        minlength: 10,
        dateITA: true,
        less_than_date: useLTD
    });
});

Before the I added the "add method", it correctly validated the date, but now it does not, and doesnt accept even if the date is greater than the previous date.

Really stumped on this one, any help would be greatly appreciated.

The .addMethod() method simply creates a new rule that you can use at any time. In other words, you would simply put .addMethod() in your DOM ready handler and call it ONE time, instead of calling it many times within your .each() function. Of course, your .rules() method would stay where it's located presently. — Sparky
– Sparky, Commented May 11, 2015 at 22:49

Seán McCabe · Accepted Answer · 2015-05-11 22:17:34Z

1

Ok, as soon as I posted this, I realised that the return was the wrong way round.

Should have been:

return nprevDate <= ncurDate;

answered May 11, 2015 at 22:17

Seán McCabe

9204 gold badges25 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

jQuery Validate add Method dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related