JQuery valida dinámicamente agrega reglas

Question

Actualmente estoy usando el complemento validar para validar un formulario (usando controles ASP.Net). He eliminado las reglas de la configuración estándar dentro del método form.validate, es decir:

    $("form").validate({

    rules: {
        ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required"
    }

});

Ahora tengo estos en varias funciones que agregan los ruless dependiendo de qué botón se haga clic. Esto funciona bien para los cuadros de texto, pero para una RadiobuttonList cuando el complemento intenta agregar la regla, hay un error que dice que el elemento no está definido.

function addRuleSet() {
    $("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true });

}

Creo que el problema es que estoy usando el atributo de nombre (asp pone $ en) para definir el grupo al que pertenecen los botones de radio en lugar de una identificación (pero en la configuración estática todos los elementos se definen usando el nombre De todos modos, no estoy seguro de cómo evitar agregar una regla para un grupo de botones de radio asociados, cualquier consejo sería apreciado.

PD: Realmente necesito llamar a RadioButtonList en lugar de a los botones de radio individuales.

Answer 1

También puede aplicar una regla estableciendo clases en el elemento. Por ejemplo, si le da a la clase '' requerido '' a una entrada, entonces la regla requerida se aplica a ese elemento. Para hacer esto, usaría la propiedad CssClass en el control. Es posible que deba experimentar con controles compuestos, como RadioButtonList, para asegurarse de que la clase se aplique a los elementos de entrada generados, no al contenedor. Si tiene problemas con esto, una forma de hacerlo sería agregar la clase usando jQuery después de que la página se cargue en función de un selector.

<asp:RadioButtonList id="RadList" runat="server" CssClass="required">
   ...
</asp:RadioButtonList>

o

<script type="text/javascript">
     $(function() {
          $(':radio').addClass('required');
          $('form').validate();
     });
</script>

Para una regla compleja basada en clases, puede agregar nuevas reglas usando addClassRules .

<script type="text/javascript">
    $(function() {
        $.validator.addClassRules({
             range0to10: {
                  range: [0, 10]
             },
             name: {
                  minlength: 2,
                  required: true
             }
        });
        $('form').validate();
    });
</script>

<form ... >
<input type="text" name="rating" id="rating" class="range0to10" />
<input type="text" name="firstName" id="firstName" class="name" />
<input type="text" name="lastName" id="lastName" class="name" />
</form>

Answer 2

Después de días de esto volviéndome loco, hacer la pregunta me hizo pensar cómo hacer que el elemento regrese correctamente, y me encontré con este método de hacer referencia a la luz de las estrellas que me permite hacerlo:

$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true });