Question

I’m trying to use the jQuery validation plugin to validate forms, but I need to completely remove the ability for it to use the name attribute. Part of my form is created dynamically based on a counter being incremented and I simply want to use classes only.

Is there a way to do this?

I’ve implemented the addClassRules method and added all my classes for each field, but if I remove the class from the field it still validates based on the name field.

This is really starting to get frustrating.

jQuery.validator.addClassRules({
    username: { 
        required: true, 
        minlength: 2, 
        remote: "whatever.php" 
    }
});

etc.

<div class="control-group">
    <label class="control-label" for="username">
        <?php echo $entry_username; ?>
    </label>
    <div class="controls">
        <input type="text" class="input-large" 
               name="username" id="username" 
               value="<?php echo $username; ?>" required>
    </div>
</div>

As you can see this element does NOT have a class of username, but the validation falls back to use the name attribute if the class isn’t present.

I want to use classes ONLY for validation.

Thanks.

Answer 1

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

Note: You must call this method after you call .validate().

I have a very large form where the user can dynamically add fields. This is the exact method I use to make sure my newly created fields are also part of the validation.

(If you remove the class from the input, it will not (can not) validate on the name attribute because the name attribute is not used anywhere within the .validate() options or rules.)

HTML:

<form id="form">
    <input type="text" class="myclass" name="whatever" />
</form>

jQuery:

$("#form").validate({
    // my options
});

// the following method must come AFTER .validate()
$('#form').find('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5,
        messages: {
            required: "Required input",
            minlength: jQuery.format("At least {0} characters are necessary")
        }
    });
});

jsFiddle DEMO