Jquery validation adds required dynamic inputs

Question

I am currently using jQuery bassistance validation or the jqueryvalidation plugin (they renamed it) and I have it validated like this:

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

Now, depending on the amount, I will need to require or not an additional field of the drop-down list, and depending on this drop-down list, enter another text. so that:

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

I tried to add the css class 'required', like other fields, but I accept it if they are not inside the rules, then this does not work? I tried adding rules like this:

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

and this also does not work. any suggestions?

EDIT: link to jquery validation that I am using. if I used the rules outside of it, it throws this error:

 Uncaught TypeError: Cannot read property 'settings' of undefined 

on line 124:

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

and using the sentences that I saw elsewhere, I did this, which causes an error:

 var defaultrules = { txtAmount: { required: true, digits: true } } if($.fn.validate) { $("#frmNewOrder").validate(); addRules(defaultrules); } 

EDIT 2: here's the html markup, hope this 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> 

Answer 1

faced a similar problem with her,

in fact, what you will notice is that the validator is undefined on line 124, i.e. no validation instance associated with the form

if you check the validation method, you will see that if the validator is undefined, it will create a new

 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 the validator already exists in the form object, so from my understanding, and since validate returns a validator instance, you can call validate , and then add additional rules to the settings.rules returned validator and run again that doesn't very practical.

Another solution would be to simply add the added rules to the source rule object before calling validate

So, in my case, I wanted the input field to be checked as a number, however I didn’t want Google Chrome to do this field with numbers (just try in Chrome to understand what I mean, it had a problem of circumventing type checking in case the user entered manually, and in my case the user will most likely 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

Answer 2

I also received the same error message, and realized that I must first call validate() on the form before I call rules() in separate input fields. This behavior is documented .

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

This may not be the answer to the OP problem, but I am posting this to help anyone who has looked for jquery validation Cannot read property settings of undefined and clicked this page.

Thanks to the prompt @ nsawaya !

Answer 3

their problem is when getting a dynamic add element using an identifier, so it works if you use an attribute selector, for example, add the data="ddlReason" attribute and do this:

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