Question

I have two datepickers where the user makes a selection. Then for each day in the selected interval I add an input textbox. I’m struggeling to get the jQuery Validate plugin working for the generated textboxes. It seems like if only the first is being validated.

When the page is loaded I add a custom validate method and set up the form to validate:

$(document).ready(function() {
$.validator.addMethod("validHoursInDay", function(value, element) {
    if (this.optional(element)) {
        return this.optional(element);
    }
    var regex = /\d((\.|,)\d)?/;
    var isDecimalNumber = regex.test(value);
    if (isDecimalNumber) {
        var parsedNumber = parseFloat(value.replace(",", "."))
        return parsedNumber >= 0 && parsedNumber <= 24;
    }
    else {
        return false;
    }
});
 $("#aspnetForm").validate({
    debug: true,
    onfocusout: false,
    submitHandler: function(form) {
        submitabscence();
    },
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = 'Got some erros for you';
            $.each(validator.errorList, function(index, value) {
                value.element.style.borderColor = 'red';
            });
            ShowErrorBox(message);
        }
    }

});
});

After creating the textboxes, I select them and add the rules

$("#week-overview :input").each(function() {

    $(this).rules("add", {
        validHoursInDay : true,
        required: true,
        messages: {
            required: "Fill in a number",
            validHoursInDay: "Valid Hours in Day"
        }
    });
});

Only the first textbox seems to be validated.

Answer 1

jQuery validate plugin seems to need a unique name for each validated input. When doing this validation works as it should.