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

jquery validate rules

Question

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

Por ejemplo, ¿qué función crearía una regla que valida solo si se marca al menos una de un grupo de casillas de verificación?

Answer 1

Regla personalizada y atributo de datos

Puede crear una regla personalizada y adjuntarla a un elemento utilizando el atributo de data utilizando la sintaxis data-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 Atleast 1) usando la sintaxis data-msg-rulename="my new message" .

NOTA

Si usa el método data-rule-rulename , deberá asegurarse de que el nombre de la regla esté en minúsculas. Esto se debe a que la función de validación de jQuery dataRules aplica .toLowerCase() para comparar y la especificación de 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>

Answer 2

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

Answer 3

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. crear un elemento de entrada en su html:

<input name="user_name" type="text" >

2. declara las reglas de validación de tu 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''
      },
    },

3. 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

funciona perfectamente

Answer 4

Puedes agregar una regla personalizada como esta:

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

Y úsalo así:

PhoneToggle: {
    booleanRequired: ''on''
}        

Espero que esto ayude

Answer 5

Puedes 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 como tal:

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

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

Answer 6

$(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"
            }
        }
    });
});

Answer 7

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