jQuery Validate Plugin – Como criar uma regra personalizada simples?

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

Por exemplo, qual function criaria uma regra que valida somente se pelo menos um de um grupo de checkboxs de seleção estiver marcado?

    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 isto da seguinte forma:

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

    Basta alterar o conteúdo do ‘addMethod’ para validar suas checkboxs 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 atributo de data usando a syntax data-rule-rulename="true";

    Portanto, para verificar se pelo menos um de um grupo de checkboxs de seleção está marcado:

    data-rule-oneormorechecked

      

    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 sobrescrever a mensagem de uma regra (ie: Pelo menos 1 deve ser selecionado) usando a syntax data-msg-rulename="my new message" .

    NOTA

    Se você usar o método data-rule-rulename , precisará verificar se o nome da regra é todo em minúsculas. Isso ocorre porque o dataRules function de validação do jQuery aplica o .toLowerCase() para comparar e a especificação do HTML5 não permite letras 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(); 
       
    red
    blue
    green

    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 usá-lo assim:

     PhoneToggle: { booleanRequired: 'on' } 

    Espero que isto ajude

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

    Isso significa que temos que criar uma regra de validação personalizada, que enviará uma solicitação http async com o servidor remoto.

    1. crie um elemento de input no seu html:

    1. 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= // the response should be "raw text", with content "true" or "false" only remote: '/interface/users/is_username_valid' }, }, 
    1. 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

    funciona perfeitamente.