jquery validate: mapping rule to another element

Question

I have defined rules something like this

var validator = $('#myForm').validate({
    rules: {
        'name': {
             'required': true,
             'maxlength': 100
         },
         'dynamicElement': {
              'required': true
          }
     }
});

On run time I have some dynamic text elements having id as

mySettings0.config
mySettings1.confing
etc

then I want to run a validation rules on a specific element, something like this

function performValidation() {
    var valid = true;
    $('#myForm input.txt').each(function(i,v){
        /* If input.txt[id$=config]" then test this element
           by mapping the validation rule -> dynamicElement' */
        //otherwise
        valid = validator.element(v) && valid;
    });
    return valid;
}

Is it possible???

_Why_ you'd want to do this is very unclear. Perhaps if you explained it with more detail and included enough markup to make an example, I could give you a decent answer. — Sparky, Feb 08 '14 at 18:30
I updated the question. The object is to apply some already defined rule on dynamic generated elements — coure2011, Feb 10 '14 at 05:28
But where is the HTML markup I previously asked about? Where is the code that dynamically creates the elements? The only way to dynamically apply rules is through the `.rules('add')` method. — Sparky, Feb 10 '14 at 15:55

score 0 · Answer 1 · edited May 23 '17 at 11:57

There are a couple of approaches depending on the rules, HTML markup and code, most of which you haven't shown.

1) If the only rule you need to apply to dynamically created elements is something simple like required, then make sure your dynamically created elements contain the required attribute.

<input type="text" name="dynamic_element_1" required="required" />

2) More complex rules can be applied to dynamically created elements using the plugin's .rules('add') method inside the function that creates the new elements

$(document).ready(function() {

    $('#myForm').validate({
        // other rules & options
    });

    // function to dynamically create new elements

        // create new elements
        // apply the rules
        $('input[name="dynamic_element_2"]').rules('add', {
            required: true,
            // more rules
        });

    // end code to create new elements

});

Notes:

1) The .rules() method must be placed inside a jQuery .each() if/when you're targeting more than one element at a time. Otherwise only the first element in the set will get the rule.

2) Your dynamically created elements must have unique name attributes or the plugin will not work. If they have an id it should also be unique to maintain valid HTML and ensure the JavaScript engine does not choke.

3) There are many possible variations on what I've shown above but without a more complete example of your actual code, it's hard to say what would work best.

4) Compound rules can also be saved in variables, or classes can be created to represent compound rules. Again, hard to say what would work best when your code remains a mystery.

Here's a more comprehensive answer about adding rules, where some of the methods (2a and 2b) will work on dynamically created elements.

jquery validate: mapping rule to another element

1 Answers1