jQuery Validar Plugin - Como criar uma regra personalizada simples?

Como você cria uma regra simples e personalizada usando o plug-in jQuery Validate (usando addMethod) que não usa um regex?

Por exemplo, que função criaria uma regra que valida apenas se pelo menos uma de um grupo de caixas de seleção estiver marcada?

Você pode criar uma regra simples fazendo algo assim:

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

E então aplicando assim:

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

Basta alterar o conteúdo do 'addMethod' para validar suas caixas de seleção.

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

Regra personalizada e atributo de dados

Você pode criar uma regra personalizada e anexá-la a um elemento usando o dataatributo usando a sintaxedata-rule-rulename="true";

Portanto, para verificar se pelo menos uma de um grupo de caixas de verificação 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");

E você também pode substituir a mensagem de uma regra (ou seja: pelo menos 1 deve ser selecionado) usando a sintaxe data-msg-rulename="my new message".

NOTA

Se você usar o data-rule-rulenamemétodo, precisará garantir que o nome da regra esteja em letras minúsculas. Isso ocorre porque a função de validação jQuery dataRulesse aplica .toLowerCase()à comparação e a especificação HTML5 não permite maiúsculas.

Exemplo de trabalho

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

Obrigado, funcionou!

Aqui está o 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");

Você pode adicionar uma regra personalizada como esta:

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

E adicione-o como uma regra assim:

PhoneToggle: {
    booleanRequired: 'on'
}        

Para este caso: formulário de inscrição do usuário, o usuário deve escolher um nome de usuário que não seja utilizado.

Isso significa que precisamos criar uma regra de validação personalizada, que enviará uma solicitação http assíncrona com o servidor remoto.

1. crie um elemento de entrada no seu html:

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

2. declare suas regras de validação de formulário:

  $("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. o código remoto deve ser como:

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end