jquery validation add inputs required dynamically

Question

I am currently using the bassistance jquery validation or the jqueryvalidation plugin(they renamed it) and I have it validating a form like so:

if($.fn.validate) {
        $("#frmNewOrder").validate({
            rules: {
                txtAmount: {
                    required: true,
                    digits: true
                },
                ddlAccount: {
                    required: true
                },
                ddlBank: {
                    required: true
                }
            }
        });
    }

Now depending on the amount I need to require or not an extra field a dropdownlist and depending on that dropdownlist another text input. so it's like:

 if($('#txtAmount').val() >= 10000){
     //add ddlReason required
 }

 if($('#ddlReason').val() == 'o'){
     //add txtReason required
 }

I've tried adding the css class 'required' like the other fields but I take it if they are not inside the rules then it doesn't work? I've tried adding rules like this:

 $( "#ddlReason" ).rules( "add", {
        required: true});

and that doesn't work either. any suggestions?

EDIT: Here's the link to the jquery validate that I'm using. if I used rules outside it gives this error:

Uncaught TypeError: Cannot read property 'settings' of undefined

on line 124:

var settings = $.data(element.form, 'validator').settings;

and using the suggestions I've seen in other places i've done this which is what causes the error:

var defaultrules = {
    txtAmount: {
        required: true,
        digits: true
    }
}

if($.fn.validate) {
    $("#frmNewOrder").validate();
    addRules(defaultrules);
}

EDIT 2: here's the html markup, hope it helps.

<form id="frmNewOrder" name="frmNewOrder" action="" method="post">
<label>Amount</label>
<input type="text" name="txtAmount" id="txtAmount" class="required" />
<button id="calculate" type="button">Calculate</button>
<div id="dvreason" style="display:none;">
    <select id="ddlReason" name="ddlReason">
         <option></option>
         <option value="i">Option 1</option>
         <option value="o">Other</option>
    </select>
    <div id="dvother" style="display:none">
       <label>Other reason</label>
       <input type="text" name="txtOther" id="txtOther" />
    </div>
</div>
<input type="submit" name="send" id="send" value="Send" />
</form>

Can you post some HTML with the JS in context? Maybe put it in a jsfiddle — Sébastien
– Sébastien, Commented Oct 12, 2013 at 23:28
I am having a hard time adding the validate on jsfiddle lol if I can figure it out I'll post it — Andres
– Andres, Commented Oct 13, 2013 at 0:10
No, you can certainly use class="required" or .rules('add') instead of within rules declaration in .validate(). There must be something else wrong with your code. Show enough code for constructing a working demo. All relevant jQuery and HTML. — Sparky
– Sparky, Commented Oct 13, 2013 at 1:16
I just added some more code and a link the the validate js file I'm using. — Andres
– Andres, Commented Oct 13, 2013 at 2:23
I just added the html markup, and just as a personal opinion I see it really unfair to vote down my question and request to have it closed seeing how I put alot of info more than others have when asking. And I always in all my questions shown all my effort and most of my code. Not pointing fingers cause I don't know who to point to, but had to let it be known. — Andres
– Andres, Commented Oct 13, 2013 at 20:01

Community · Accepted Answer · 2017-05-23 10:31:33Z

10

I'd gotten the same error message as well and realised that I should call the validate() on the form first before I call rules() on individual input fields. This behaviour is documented.

$('#form').validate({
  rules: {
    email: {
      email: true
    }
  }
});

$('#email').rules('add', {
  required: true
});

This may not be the answer to OP's problem, but I'm posting this to help anyone who searched jquery validation Cannot read property settings of undefined and clicked this page.

Thanks to the hint given by @nsawaya!

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 3, 2014 at 6:01

pikachu0

8221 gold badge13 silver badges24 bronze badges

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

Comments

nsawaya · Accepted Answer · 2013-10-22 21:14:48Z

faced similar issue with it,

in fact what you'll notice is that validator is undefined at line 124, i.e. there is no validator instance associated with the form

if you check the validate method you see that if validator is undefined it will create a new one

var validator = $.data(this[0], 'validator');
        if ( validator ) {
            return validator;
        }

        // Add novalidate tag if HTML5.
        this.attr('novalidate', 'novalidate');

            //HERE it is creating a new one using the constructor   
        validator = new $.validator( options, this[0] );
        $.data(this[0], 'validator', validator);

Apparently the rules method assumes that validator is already there in the form object, so from my understanding, and since validate returns validator instance, you can call validate and then append your extra rules to the returned validator settings.rules object and re-run again which is not very practical.

The other solution would be to simply append the added rules to the initial rules object before calling validate

So in my case I wanted the input field to be validated as number however I didn't want Google Chrome to make it a number field (just try in Chrome to see what I mean, this had the issue of bypassing the type number validation in case the user entered manually, and in my case the user will most probably enter the number manually)

code example:

var customRule = {number: true};

//suppose populateValidateRules() fills your initial rules, which is my case at least
var validationRules =  populateValidateRules();

validationRules["rules"].fieldToBeDynamicallyModifiedForValidation= customRule;

$(formId).validate(validationRules);

Hope this helps

George SEDRA · Accepted Answer · 2014-10-10 07:32:52Z

0

their is a problem while getting the dynamic add element using the id so it is working if you use attribute selector so for example add attribute data="ddlReason" and make it like this :

$( "input[data='ddlReason']" ).rules( "add", {
        required: true
});

answered Oct 10, 2014 at 7:32

George SEDRA

7859 silver badges12 bronze badges

Collectives™ on Stack Overflow

jquery validation add inputs required dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related