Jquery validation plugin dynamically add rules if control exists

Question

I am adding a whole bunch of Jquery validation rules dynamically. I am getting error because some of the textboxes are hidden based on user selection on the page before and therefore do not exist on the page. How do I check if the textbox exists before adding the validation rules?

Here are the validation rules being added:

 $('[id$="txtLastName"]').rules('add', {
    isSpecialChar: true,
    maxlength: 13,
    oneOrBothEntered: "txtFacility",
    messages: {
        oneOrBothEntered: "Either Provider Name or Facility Name must be entered"
    }
});
$('[id$="txtFirstName"]').rules('add', {
    isSpecialChar: true,
    maxlength: 11,
    conditionallyRequired: "txtLastName",
    messages: {
        conditionallyRequired: "This field is required."
    }
});

...and a whole bunch more. So say txtLastName was hidden, this code breaks. How do I check first if txtlastname exists before adding the rules?

EDIT: Per @sparky's comment, adding HTML for fields:

 <div class="container1">
                    <span class="span150Padded">Last</span>
                    <asp:TextBox ID="txtLastName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
                </div>
                <div class="container1">
                    <span class="span150Padded">First</span>
                    <asp:TextBox ID="txtFirstName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
                </div>

The reason I am adding the rules dynamically is because I am using master pages so my fields are renamed. I couldn't use the <%=textbox.ClientID%> method because my validation is in a separate js file which is referenced and called from my aspx page, and a js file won't recongnize something like that. After alot of back and forth, I have found that the cleanest solution was to add the validation rules dynamically.

If you have another suggestion for me, please let me know.

Your code is incomplete... how do these new elements get added to the page in the first place? How about just calling the rules('add') method immediately after you add the new element? — Sparky
– Sparky, Commented Jul 1, 2013 at 15:45
Added HTML of elements. They are not added dynamically. Added explanation of why I am adding rules dynamically if textboxes are there from the get-go. Let me know if I'm doing it all wrong...Thanks:) — ploni
– ploni, Commented Jul 1, 2013 at 16:05

Sparky · Accepted Answer · 2013-07-01 17:49:05Z

1

When using the jQuery Validate plugin or any of its methods, the plugin will not target all elements if your selector targets more than one element.

Use the jQuery .each() method to target all elements.

$('[id$="txtLastName"]').each(function() {
    $(this).rules('add', {
        ...
    });
});

EDIT:

If you want to avoid using .each(), then target the one element.

$('#justOneField').rules('add', {
    ...
});

edited Jul 1, 2013 at 17:49

answered Jul 1, 2013 at 16:15

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

ploni Over a year ago

This is great - it works! Is there any other way of doing it like saying if exists... I am just a bit nervous about this because I will not be supporting this app, I am just writing it. So I am trying to make it as readable as possible and something like this is a bit confusing - why are we doing a .each method on a single textbox?? If this is the only known way, I will go with it and try to explain in comments...

Sparky Over a year ago

@user2521483, jQuery is already doing an "if exists" of sorts. When a jQuery selector matches nothing, then nothing happens.

Sparky Over a year ago

@user2521483, You're doing an .each() because your chosen jQuery selector, $=, is not targeting just a single element. If you want to avoid using .each(), then just target the one particular element. See edited answer.

ploni Over a year ago

Oh, I see. I am using that selector because the id changes at runtime because I am using Master pages. I added clientIdMode=Static and tried targeting one element using the id (like you have in your edit). It works fine if the element is on the page but if it is not, I get the original error. Is there a way to say if element exists, $('#justOneField').rules('add'...

Sparky Over a year ago

@user2521483, I think you're missing the point... "if element exists" is what jQuery is already doing for you when you use any jQuery selector. Using your more generic jQuery selector, you must use an .each()... it is the proper way to get this plugin to work in this context.

|

Al Option · Accepted Answer · 2014-02-06 14:59:51Z

0

Per the documentation

$("#myform").validate({
ignore: ":hidden"
});

answered Feb 6, 2014 at 14:59

Al Option

6016 silver badges5 bronze badges

Collectives™ on Stack Overflow

Jquery validation plugin dynamically add rules if control exists

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related