jQuery Validate Plugin - ¿Cómo crear una regla personalizada simple?


351

¿Cómo se crea una regla simple y personalizada usando el complemento jQuery Validate (usando addMethod) que no usa una expresión regular?

Por ejemplo, ¿qué función crearía una regla que valide solo si al menos una de las casillas de verificación está marcada?


41
95 votos a favor, supongo que esto significa bassistance.de/jquery-plugins/jquery-plugin-validation la documentación podría no estar clara: P
Simon Arnold

No sé si todavía está buscando (4 años después) pero esto podría ayudar a learn.jquery.com/plugins/…
Ron van der Heijden

Respuestas:


376

Puede crear una regla simple haciendo algo como esto:

jQuery.validator.addMethod("greaterThanZero", function(value, element) {
    return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");

Y luego aplicando esto así:

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

Simplemente cambie el contenido del 'addMethod' para validar sus casillas de verificación.


23
¿Qué es el this.optional (elemento) || haciendo en esa función? Parece que todas las reglas tienen eso, pero no puedo decir por qué sería relevante para cualquier regla, excepto "obligatorio".
machineghost

38
Dejarlo fuera significaría que el método siempre se aplicaría, incluso cuando el elemento no sea necesario.
Mark Spangler

Supongo que this.optional (element) devuelve verdadero si el elemento es nulo?
tnunamak

12
para que se ejecute, "cantidad" debe ser la identificación y el nombre de algún elemento en la página?
Hoàng Long

66
Sí, la cantidad se refiere al atributo de nombre de algún campo de formulario de entrada.
Mark Spangler

96
$(document).ready(function(){
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) {
            $.ajax({
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                {
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                }
             });
            return response;
        },
        "Username is Already Taken"
    );

    $("#regFormPart1").validate({
        username: {
            required: true,
            minlength: 8,
            uniqueUserName: true
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            }
        }
    });
});

Probé este método y funciona bastante bien, sin embargo, los hombres que devuelven cualquier otro mensaje que no sea verdadero todavía no valida "ok" está atascado en "El nombre de usuario ya está tomado", ¿qué puede estar mal? También he comprobado que se devuelve correctamente haciendo eco de valores en lugar de devolver falso y verdadero, y esto funciona. me parece que mi navegador no está recogiendo la devolución false, return true? esto me está volviendo loco ..
Mikelangelo

1
lo hizo funcionar insertando una variable que se llama resultado antes del método add, parece que los valores verdaderos y falsos se están registrando correctamente dentro de la función de éxito
Mikelangelo

23
Ten cuidado con esto. Este no es un código completamente funcional en el sentido de que el "éxito" de AJAX va a volver después de la "respuesta de retorno"; corre, lo que resulta en comportamientos inesperados
Malachi

1
@Malachi es correcto. Esto se puede solucionar haciendo una llamada de sincronización, pero eso es desagradable. Me pregunto si hay alguna otra forma de lograr esto. Hay lo remoteque otros han sugerido, pero por lo que puedo decir, solo permite una validación, por lo que no funcionaría si necesita dos validaciones asíncronas o si tiene varios mensajes de error dependiendo de la respuesta.
Adam Bergmark

2
hay un método remoto para validar jquery: jqueryvalidation.org/remote-method
TecHunter

70
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    }, "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules({
    optdate : { optdate : true }    
});

77
addClassRules es una buena adición a la respuesta.
Cuatro de

@commonpike Esto es exactamente lo que estaba buscando, muchas gracias.
Simba

46

Regla personalizada y atributo de datos

Puede crear una regla personalizada y adjuntarla a un elemento usando el dataatributo usando la sintaxisdata-rule-rulename="true";

Entonces, para verificar si al menos una de un grupo de casillas está marcada:

data-rule-oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

addMethod

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

Y también puede anular el mensaje de una regla (es decir: Debe seleccionarse al menos 1) utilizando la sintaxis data-msg-rulename="my new message".

NOTA

Si utiliza el data-rule-rulenamemétodo, deberá asegurarse de que el nombre de la regla esté en minúsculas. Esto se debe a que la función de validación jQuery se dataRulesaplica .toLowerCase()a la comparación y la especificación HTML5 no permite mayúsculas.

Ejemplo de trabajo

$.validator.addMethod("oneormorechecked", function(value, element) {
  return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>


2
solo para jquery.validate ver> = 1.10
Pavel Nazarov

Por mi vida no pude encontrar esto en la documentación oficial, desearía que lo aclararan más. ¡Gracias!
Josh Mc

22

Gracias, funcionó!

Aquí está el código final:

$.validator.addMethod("greaterThanZero", function(value, element) {
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
}, "* Please check at least one check box");

13

Puede agregar una regla personalizada como esta:

$.validator.addMethod(
    'booleanRequired',
    function (value, element, requiredValue) {
        return value === requiredValue;
    },
    'Please check your input.'
);

Y agréguelo como una regla como esta:

PhoneToggle: {
    booleanRequired: 'on'
}        

1

Para este caso: formulario de registro de usuario, el usuario debe elegir un nombre de usuario que no se toma.

Esto significa que tenemos que crear una regla de validación personalizada, que enviará una solicitud http asíncrona con el servidor remoto.

  1. crea un elemento de entrada en tu html:
<input name="user_name" type="text" >
  1. declare sus reglas de validación de formulario:
  $("form").validate({
    rules: {
      'user_name': {
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      },
    },
  1. el código remoto debería ser como:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.