Question

How can I validate forms with jQuery plugin with ids that have a name pattern, like #formNewHouse1, #formNewHouse2,.. ?

This code is working with a single type (normal) form:

$("#formNewHouse").validate({
    rules: {
        formNewHouseName: {
            required: true
        },
        formNewHouseAddress: {
            required: true
        }
    },
    messages: {
        formNewHouseName: {
            required: "Please type a name"
        },
        formNewHouseAddress: {
            required: "Please type an address"
        }
    }
});   

I need something like this, where X = 2,3,6,18,19,… (IDs from DB) how can I achieve this?

$("#formNewHouseX").validate({
    rules: {
        formNewHouseNameX: {
            required: true
        },
        formNewHouseAddressX: {
            required: true
        }
    },
    messages: {
        formNewHouseNameX: {
            required: "Please type a name"
        },
        formNewHouseAddressX: {
            required: "Please type an address"
        }
    }
}); 

Thanks in advance.

Answer 1

Also, similar to this question with a working answer:

jQuery Validate set rule using wildcard to find target fields

---

Here’s an answer along with something the others are lacking… a working demo:

Use jQuery’s .each() method to initialize .validate() on all matching forms.

Then use the built-in rules() method to add rules and assign them by class. See documentation.

HTML:

<form id="formNewHouse1">
    <input type="text" class="myclass" name="formNewHouseName" />
    <input type="text" class="myclass" name="formNewHouseAddress" />
</form>

<form id="formNewHouse2">
    <input type="text" class="myclass" name="formNewHouseName2" />
    <input type="text" class="myclass" name="formNewHouseAddress2" />
</form>

jQuery:

var myoptions = {
    // contains options for all forms
};

$("form[id^=formNewHouse]").each(function() {
    $(this).validate(myoptions);
});

// the following method must come AFTER .validate()
$('form').find('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true, // just another example rule
        messages: {
            required: "Required input",
            digits: "Please only enter digits"
        }
    });
});

jsFiddle DEMO