jQuery Validar Plugin - Como criar uma regra personalizada simples?

351

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?

Edward
fonte
41
95 upvotes, eu acho que isso significa bassistance.de/jquery-plugins/jquery-plugin-validation documentação pode não ser claro: P
Simon Arnold
Não sei se você ainda está procurando (4 anos mais tarde), mas isso poderia ajudar learn.jquery.com/plugins/...
Ron van der Heijden

Respostas:

376

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.

Mark Spangler
fonte
23
Qual é o this.optional (elemento) || fazendo nessa função? Parece que toda regra tem isso, mas não sei dizer por que isso seria relevante para qualquer regra, exceto "obrigatório".
Machineghost
38
Deixar de fora isso significaria que o método sempre seria aplicado, mesmo quando o elemento não for necessário.
68868 Mark Spangler
Presumo que this.optional (elemento) retorne verdadeiro se o elemento for nulo?
tnunamak
12
para que seja executado, "amount" deve ser o ID e o nome de algum elemento da página?
Hoàng Long
6
Sim, quantidade refere-se ao atributo name de algum campo do formulário 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"
            }
        }
    });
});
Tracy
fonte
Eu tentei esse método e ele funciona muito bem, no entanto, homens retornando qualquer outra mensagem que não seja verdade, ainda não validam "ok", ele está preso em "Nome de usuário já está em uso", o que pode estar errado? Também verifiquei que ele é retornado corretamente, ecoando valores em vez de retornar falso e verdadeiro, e isso funciona. parece-me que meu navegador não está pegando o retorno false, return true? Isso está me deixando louco ..
Mikelangelo
11
tenho que trabalhar através da inserção de uma variável que é chamado de resultado antes do addMethod, parece que os verdadeiros, falsos valores estão registrando corretamente dentro da função de sucesso
Mikelangelo
23
Tenha cuidado com isso. Esse não é um código totalmente funcional, pois o "sucesso" do AJAX retornará após a 'resposta de retorno'; é executado, resultando em comportamentos inesperados
Malaquias
11
@ Malachi está correto. Isso pode ser corrigido fazendo uma chamada de sincronização, mas isso é desagradável. Gostaria de saber se existe alguma outra maneira de conseguir isso? Existem remoteoutras pessoas que sugeriram, mas, até onde sei, só permite uma validação; portanto, não funcionaria se você precisasse fazer duas validações assíncronas ou ter várias mensagens de erro, dependendo da resposta.
Adam Bergmark 19/03/2013
2
existe um 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 }    
});
commonpike
fonte
7
addClassRules é uma boa adição à resposta.
4
@ commonpike Isto é o que exatamente eu estava procurando, muito obrigado.
Simba
46

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>

BenG
fonte
2
somente para jquery.validate ver> = 1.10
Pavel Nazarov
Pela minha vida, não consegui encontrar isso na documentação oficial, gostaria que eles deixassem isso mais claro. Obrigado!
Josh Mc
22

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");
Ciaran Bruen
fonte
13

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'
}        
Bogdan Mates
fonte
1

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" >
  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=<input_value>
        //  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
Siwei Shen 申思维
fonte