submithandler - ¿Cómo podemos especificar las reglas para el complemento de validación jquery por clase?

jquery validate submithandler

Question

El complemento jQuery Validation funciona muy bien y es muy fácil de usar:

$(".selector").validate({
})

Simplemente configurando clases de CSS como "correo electrónico requerido", se mostrará el mensaje predeterminado.

Sin embargo, necesito personalizar los mensajes. La documentación dice que puede especificar reglas usando un par clave-valor para los elementos y sus mensajes correspondientes:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

Sin embargo, no es práctico especificar una regla para cada elemento de formulario, especialmente los controles generados por el servidor en ASP.NET. ¿Es posible especificar reglas que se apliquen a TODOS los elementos? ¿O puedo usar un selector de clase de alguna manera?

Intenté lo siguiente, pero no funcionó:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

Eso parecía tener un error de sintaxis: el complemento no hacía nada. Entonces probé:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

Esto no tenía ningún error de sintaxis: el complemento funcionaba, pero ignoraba las reglas / mensajes personalizados. ¿Alguien ha usado aquí el complemento jQuery Validation? Si es así, ¿cómo aplicaste reglas / mensajes personalizados a múltiples elementos?

¡Gracias!

Answer 1

A los fines de mi ejemplo, este es el código base de partida:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

JS:

$(''#myForm'').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

DEMO : http://jsfiddle.net/rq5ra/

NOTA: Independientemente de la técnica que se utiliza a continuación para asignar reglas, es un requisito absoluto del complemento que cada elemento tenga un atributo de name único .

Opción 1a) Puede asignar clases a sus campos según las reglas comunes deseadas y luego asignar esas reglas a las clases. También puede asignar mensajes personalizados.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

El método .rules() debe .validate() después de invocar .validate()

JS:

$(''#myForm'').validate({
    // your other plugin options
});

$(''.num'').each(function() {
    $(this).rules(''add'', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

DEMO : http://jsfiddle.net/rq5ra/1/

Opción 1b) Igual que arriba, pero en lugar de usar una class , coincide con una parte común del atributo de nombre:

$(''[name*="field"]'').each(function() {
    $(this).rules(''add'', {
        required: true,
        number: true,
        messages: { // optional custom messages
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

DEMO : http://jsfiddle.net/rq5ra/6/

Opción 2a) Puede extraer los grupos de reglas y combinarlas en variables comunes.

var ruleSet1 = {
        required: true,
        number: true
    };

$(''#myForm'').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

DEMO : http://jsfiddle.net/rq5ra/4/

Opción 2b) Relacionado con 2a anterior pero dependiendo de su nivel de complejidad, puede separar las reglas que son comunes a ciertos grupos y usar .extend() para recombinarlas de infinitas maneras.

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

$(''#myForm'').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1,
        field_4: ruleSet3
    }
});

Resultado final:

• field_1 será un número requerido no menos de 3.
• field_2 solo será un número requerido.
• field_3 será un número requerido no mayor que 99.
• field_4 será un número requerido entre 3 y 99.

DEMO : http://jsfiddle.net/rq5ra/5/

Answer 2

Antes de esto, debe incluir el archivo de consulta

$("#myform_name").validate({
    onfocusout: function(element) { $(element).valid(); } ,
    rules:{
       myfield_name: {
          required:true
       },
       onkeyup: false,
       messages: {
          myoffer: "May not be empty"
       }
    }
});

Answer 3

Enfoque alternativo:

$.validator.addMethod("cMaxlength", function(value, element, param) {
  
 return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, ''{0}'');

Gist: https://gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({
    ''credit-card'': {
     cMaxlength: [ ''Invalid number.'', 19 ]
    }
});

Answer 4

Me he basado en la respuesta de Starx para crear una función repetible fácil de usar que utiliza los métodos predeterminados y crea nuevos mensajes de error para clases específicas. teniendo en cuenta el hecho de que su clase específica solo se utilizará para anular el mensaje una vez que no tenga conflictos reutilizando esto para muchos nombres de clases diferentes utilizando cualquier método existente.

var CreateValidation = function(className, customMessage, validationMethod){
  var objectString = ''{"''+ className +''": true}'',
  validator = $.validator;

  validator.addMethod(
    className,
    validator.methods[validationMethod],
    customMessage
  );
  validator.addClassRules(
    className,
    JSON.parse(objectString)
  );
};

Ejemplo de uso con la clase de validación como "validation-class-firstname":

CreateValidation(''validation-class-firstname'', ''Please enter first name'', ''required'');

Answer 5

Podría usar addClassRules , como:

jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

Answer 6

Puede agregar reglas de clase usando el método addClassRules:

P.ej

$.validator.addClassRules("your-class", {
  required: true,
  minlength: 2
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

Answer 7

jQuery.validator.addClassRules(); adjuntará la validación a la clase, pero no hay opción para los mensajes, utilizará los mensajes de error generales.

Si quieres que funcione entonces, debes refactorizar las reglas como esta

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );

Answer 8

$.validator.addMethod("cMaxlength", function(value, element, param) {
  
 return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, ''{0}'');