validate - jquery validación añadir entradas requeridas dinámicamente

jquery validation with bootstrap

Question

Actualmente estoy usando la validación de jquestry bassistance o el complemento jqueryvalidation (lo renombraron) y lo tengo validando un formulario como este:

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

Ahora, dependiendo de la cantidad, necesito solicitar o no un campo adicional, una lista desplegable y, dependiendo de esa lista desplegable, otra entrada de texto. así que es como:

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

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

He intentado agregar la clase css ''required'' como los otros campos pero supongo que si no están dentro de las reglas, ¿no funciona? He intentado agregar reglas como esta:

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

y eso tampoco funciona ¿alguna sugerencia?

EDITAR: Aquí está el enlace a la validación jquery que estoy usando. si utilicé reglas fuera, da este error:

Uncaught TypeError: Cannot read property ''settings'' of undefined 

en la línea 124:

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

y usando las sugerencias que he visto en otros lugares he hecho esto, que es lo que causa el error:

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

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

EDIT 2: aquí está el marcado html, espero que ayude.

<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

Esto es un problema al obtener el elemento de adición dinámico usando el ID, de modo que está funcionando si usa el selector de atributos para, por ejemplo, agregar data="ddlReason" atributos data="ddlReason" y hacer que sea así:

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

Answer 2

se enfrentó a un problema similar con él,

de hecho, lo que notará es que el validador no está definido en la línea 124, es decir, no hay ninguna instancia de validador asociada con el formulario

si comprueba el método de validación, verá que si el validador no está definido creará uno nuevo

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);

Aparentemente, el método de rules supone que el validador ya está allí en el objeto de formulario, por lo que, desde mi comprensión, y como validate devuelve una instancia de validador, puede llamar a validate y luego anexar sus reglas adicionales al objeto validador.reglas devuelto y volver a ejecutarlo que no es muy práctico.

La otra solución sería simplemente agregar las reglas añadidas al objeto de reglas inicial antes de llamar validate

En mi caso, quería que el campo de entrada se validara como número; sin embargo, no quería que Google Chrome lo convirtiera en un campo numérico (solo intente con Chrome para ver lo que quiero decir, este tema evitó la validación del número de tipo en caso el usuario ingresó manualmente, y en mi caso el usuario probablemente ingresará el número manualmente)

ejemplo de código:

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);

Espero que esto ayude

Answer 3

También recibí el mismo mensaje de error y me di cuenta de que debería llamar a validate() en el formulario antes de llamar a rules() en campos de entrada individuales. Este comportamiento está documentado .

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

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

Esta puede no ser la respuesta al problema de OP, pero estoy publicando esto para ayudar a cualquiera que haya buscado la jquery validation Cannot read property settings of undefined y se ha hecho clic en esta página.

¡Gracias a la pista dada por @ nsawaya !