La jQuery Validation plugin funciona muy bien y es muy fácil de usar:

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

Sólo mediante el establecimiento de clases css como «obligatorios de correo electrónico», el valor predeterminado se mostrará el mensaje.

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

$(".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]main.com"
     }
   }
})

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

He intentado 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]"
        }
    }
});

Que parecía tener un error de sintaxis – el plugin no hacer nada. Entonces traté de:

$("#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 tiene ningún error de sintaxis – el plugin trabajado, pero se ignoran las reglas/mensajes personalizados. Alguien ha usado aquí jQuery Validation plugin? Si es así, ¿cómo se aplican las reglas/mensajes personalizados a varios elementos?

Gracias!

  • Supongo que ya tenemos el código fuente, que puede cambiar el mensaje no existe. Pero sería agradable ser capaz de tener mensajes diferentes para las diferentes clases o un mecanismo por el cual se podrán aplicar a varios elementos.
  • ¿Hay algo malo con las respuestas tan lejos?
  • Lo sentimos, todavía estoy tratando de todo. Me encontré con algunas complicaciones inesperadas relacionadas con la validación de los grupos (le voy a pedir que como una cuestión separada). Voy a cerrar esta pregunta de hoy – yo siempre cerca de todas las preguntas que yo hago. Gracias por toda su ayuda.
InformationsquelleAutor Zesty | 2012-02-27

9 Comentarios

  1. 75

    Para los fines de mi ejemplo, esta es la base de partida código:

    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: No importa la técnica que a continuación se utiliza para asignar reglas, es un requisito absoluto de los plugin que cada elemento tiene un único name atributo.


    Opción 1a) puede asignar clases a sus campos basados en deseado normas comunes y, a continuación, asignar las reglas para 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" />

    La .rules() método debe ser llamado después de invocando .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 el anterior, pero en lugar de utilizar un class, coincide con una parte común del nombre de atributo:

    $('[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) puedes sacar los grupos de reglas y combinarlos 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) Relativa a la 2a, pero dependiendo de su nivel de complejidad, se pueden separar las reglas que son comunes a ciertos grupos y el uso de .extender() recombinar en un infinito número de formas.

    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 no menos de 3.
    • field_2 será sólo un número requerido.
    • field_3 será un número no mayor de 99.
    • field_4 será un número entre 3 y 99.

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

    • Gran respuesta. Gracias.
    • es el nombre del atributo en la opción 1a?
    • Con este plugin, cada elemento de entrada debe tener un único name.
  2. 18

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

    Si quieres que funcione, debe de reestructurar 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 }
     );
    • Su respuesta resuelto mi problema de hoy en día. para el caso cuando usted no tiene número fijo de elementos y muy dependiendo de algunos factores en que esta solución es muy útil
  3. 0

    JS:

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

  4. 0

    He construido sobre Starx la respuesta para crear una repetible de funcionamiento fáciles de usar que utiliza los métodos predeterminados y crea nuevos mensajes de error para clases específicas. considerando el hecho de que la clase específica sólo se utiliza para anular el mensaje una vez que usted no debería tener ningún conflicto de reutilizar este para muchos diferentes nombres de clase utilizando cualquiera de los métodos existentes.

    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 validación de la clase que se está «validación de la clase nombre»:

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

    JS:

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

  6. -1

    Antes de esto, usted tiene que 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"
           }
        }
    });
    • Su respuesta es una copia exacta, palabra por palabra, de este. Además de ser un duplicado de la respuesta, no es una respuesta en absoluto. Obviamente el archivo de jQuery ya estaba incluido cuando el OP dijo esto, «jQuery Validation plugin funciona muy bien».

Dejar respuesta

Please enter your comment!
Please enter your name here