CODEWITHSUNDEEP
jquerycoldfusionjquery-validate
Vicki
Vicki

Reputation: 1446

ColdFusion Dynamic Loop with jQuery Validation Plugin Creating Dynamic Rule

I am using the jQuery Validation Plugin. I have a dynamic form that is created based on 1-5 depending on what number the user chooses for the loop. I am struggling on writing the dynamic portion to make each form field work correctly on each loop.

<!--- Looping Validation --->
<script>
     $("#form").validate({
         focusCleanup: true,
         focusInvalid: false,
    rules: {
phoneNumber_<cfoutput>#Add#</cfoutput>: {
            required: true,
            validatePhone: true
        },
},
        // Same for other fields
    messages: {
phoneNumber_<cfoutput>#Add#</cfoutput>: "This field is required.",
        // Repeat for other fields
    }
});

So the first example I tried creating, the rule works but only if it loops once. If the user selects two or higher it only works on the first one and not the second or higher loops.

// Validates Phone Number
jQuery.validator.addMethod("validatePhone", function(value, element) {
    return this.optional(element) || /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/.test(value);
}, 'Please enter valid Phone Number.');

Then I tried this and it breaks the RegEx as well as only trying to validate on the first loop as well.

// Validates Phone Number
jQuery.validator.addMethod("validatePhone", function(phoneNumber_<cfoutput>#Add#</cfoutput>) {
    var value = new RegExp("^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$");
    return phoneNumber_<cfoutput>#Add#</cfoutput>.match(value);
}, 'Please enter valid Phone Number.');

Any help with this would be greatly appreciated!! Thank you in advance!

Upvotes: 2

Views: 360

Answers (1)

Sparky
Sparky

Reputation: 98718

I am using the jQuery Validation Plugin. I have a dynamic form that is created based on 1-5 depending on what number the user chooses for the loop. I am struggling on writing the dynamic portion to make each form field work correctly on each loop.

What exactly are you talking about "looping"? I see no looping in your code. You cannot call the .validate() method more than once on the same form. You only call the .validate() method one time on your form to initialize the plugin. All subsequent calls are ignored. The actual validation of the form data occurs automatically based on events that are automatically captured by the plugin. A loop is not needed and would be totally useless here.

If you need to declare rules onto dynamically created field elements, you would call the .rules() method immediately after the new fields are created, and anytime after .validate().

Target all fields that "start with" phoneNumber_...

$('input[name^="phoneNumber_"]').each(function() {
    $(this).rules('add', {
        required: true,
        validatePhone: true,
        messages: {  // optional
            required: "custom message for required",
            validatePhone: "custom message for validatePhone"
        }
    });
});

Upvotes: 4

Related Questions