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

¿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?

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.

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

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

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>

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

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'
}        

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

2. 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'
      },
    },

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