adding jQuery Validation rules to a javascript For Loop

Hi experts,

I'm using Visual Studio 2103
I have a web forms .aspx page using C#.

On my page I'm using the following 2 jQuery plugins.

jQuery Validation Plugin
http://jqueryvalidation.org

jQuery Masked Input Plugin
http://digitalbush.com/projects/masked-input-plugin


So on my page I have a DropDownList and a TextBox.

So right now my dropdown list displays static values for Social Security Number and Tax Id Number.

So if you select Social Security number from the dropdownlist then a mask in this format ###-##-#### is applied to my texbox.
if you select Tax Id Number from the dropdownlist then a mask in this format ##-####### is applied to my texbox.

Aside from this masking, I have also added 2 custom validation rules to the textbox.
So for example, if social security number is selected, then custom rules called SSNRule1 and SSNRule2 is applied to the textbox.

So right now my working code looks like this:

my working jQuery DropDownList on change event
            // **************** DropDownList on change event ****************
            $('#DropDownList1').on('change', function () {

                // remove the default rules set in the for validate
                $('input[name="TextBox1"]').rules('remove');

                if ($(this).val() == 1) {  // Federal Tax Id Number

                    $('#TextBox1').val(""); // clear out the textbox value
                    $('#TextBox1').unmask("")
                    $('#TextBox1').attr('placeholder', '##-#######'); // add placeholder to textbox                    
                    $('#TextBox1').mask("99-9999999"); // set textbox mask

                    $('input[name="TextBox1"]').rules('add', {
                        required: true,
                        FEINRule1: true,
                        FEINRule2: true
                    });
                } else if ($(this).val() == 2) {  // Social Security Number

                    $('#TextBox1').val(""); // clear out the textbox value
                    $('#TextBox1').unmask("")
                    $('#TextBox1').attr('placeholder', '###-##-####'); // add placeholder to textbox                    
                    $('#TextBox1').mask("999-99-9999"); // set textbox mask

                    $('input[name="TextBox1"]').rules('remove');

                    $('input[name="TextBox1"]').rules('add', {
                        required: true,
                        SSNRule1: true,
                        SSNRule2: true
                    });
                } 

                $('input[name="mytext"]').valid();  // trigger validation of the text field (optional)

            });
            // **************** DropDownList on change event ****************

Open in new window


In the picture above, if you notice, the items that are not highlighted in yellow those items are to add the appropriate mask to the textbox depending on which of the two items you select from the dropdownlist.

In the picture above, the items highlighted in yellow are the items i added to the if statements to add the rules to my textbox depending on which selection I made from the dropdownlist. So for example if a choose social security number from the dropdownlist then rules SSNRules1 and SSNRule2 are applied to the textbox called Texbox1.

So my code above works just fine. Both the masking and validation work just fine. Notice how the code above is using if else statements.


My Question:


So this is my question. In the example above the mask formats are hard coded inside an if else statement

I have a different version of the same page. My new page works the same but in my new page instead of hardcoding the mask formats in an if else statement. I'm storing the mask format values in a sql server table. My table looks like this:

my table contining the mask formats
So then on my page, my dropdownlist uses the Description column as what is displayed in the dropdown and the Mask column as the value selected.

So my new code for my new example looks like this:

my new code for the dropdownlist on change event
        // **************** DropDownList on change event ****************
        $('#DropDownList1').change(function () {


            for (var i = 0; i < maskList.Data.length; i++) {
                var mask = maskList.Data[i];

                if ($('#DropDownList1 option:selected').val() == mask.pk) {
                    $('#TextBox1').val(''); // clear out the textbox value
                    $('#TextBox1').unmask('')
                    $('#TextBox1').attr('placeholder', mask.placeholder); // add placeholder to textbox
                    $('#TextBox1').mask( mask.mask); // set textbox mask
                }
            }

        });
        
        // **************** DropDownList on change event ****************

Open in new window


This code works just fine in my example.
So what this code does is it grabs the mask value from the dropdownlist that is bound to my sql server table.
So with this code when I run it displays social security number and tax id number.
If i choose either of them then it applies the mask format for that item to my textbox.

So now where I'm stuck at is adding the validation rules to this for loop.

In my first example above where I was using the if else statements I was able to add the rules with this code

                    $('input[name="TextBox1"]').rules('add', {
                        required: true,
                        FEINRule1: true,
                        FEINRule2: true
                    });

and this code

                    $('input[name="TextBox1"]').rules('remove');
                    $('input[name="TextBox1"]').rules('add', {
                        required: true,
                        SSNRule1: true,
                        SSNRule2: true


Anyone know the syntax to add these same validation rules to my for loop code above?
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Suggestion - have two text entries - one for each option each with their own validation rule.
Hide the one that is not being used
Each rule checks to see if the control it is bound to is displayed and if it isn't it does not validate.

Just a suggestion - unfortunately your question is a bit long to dig down to what is required or how to change what you have - maybe another expert will be able to help - but if I was doing this then I would do at as described above.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.