Plugin de validation jQuery - Comment créer une règle personnalisée simple?


351

Comment créez-vous une règle simple et personnalisée à l'aide du plug-in jQuery Validate (à l'aide addMethod) qui n'utilise pas d'expression régulière?

Par exemple, quelle fonction créerait une règle qui ne valide que si au moins une case d'un groupe de cases à cocher est cochée?


41
95 votes positifs, je suppose que cela signifie que la documentation bassistance.de/jquery-plugins/jquery-plugin-validation peut ne pas être claire: P
Simon Arnold

Je ne sais pas si vous recherchez toujours (4 ans plus tard) mais cela pourrait aider learn.jquery.com/plugins/…
Ron van der Heijden

Réponses:


376

Vous pouvez créer une règle simple en faisant quelque chose comme ceci:

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

Et puis appliquer ceci comme ceci:

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

Modifiez simplement le contenu de 'addMethod' pour valider vos cases à cocher.


23
Quel est l'élément this.optional (élément) || faire dans cette fonction? Il semble que toutes les règles aient cela, mais je ne peux pas dire pourquoi cela serait pertinent pour n'importe quelle règle sauf "obligatoire".
machineghost le

38
Le laisser de côté signifierait que la méthode serait toujours appliquée, même lorsque l'élément n'est pas requis.
Mark Spangler

Je suppose que this.optional (element) retourne vrai si l'élément est nul?
tnunamak

12
pour qu'il s'exécute, "montant" doit être l'identifiant et le nom d'un élément de la page?
Hoàng Long

6
Oui, le montant fait référence à l'attribut de nom d'un champ de formulaire de saisie.
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"
            }
        }
    });
});

J'ai essayé cette méthode et cela fonctionne assez bien, cependant, les hommes retournant un autre msg que vrai, il ne valide toujours pas "ok", il est coincé dans "Le nom d'utilisateur est déjà pris", qu'est-ce qui peut être faux? J'ai également vérifié qu'il est renvoyé correctement en faisant écho aux valeurs au lieu de renvoyer false et true, et cela fonctionne. me semble que mon navigateur ne capte pas le retour faux, retour vrai? cela me rend fou ..
Mikelangelo

1
l'a fait fonctionner en insérant une variable qui est appelée résultat avant la méthode add, semble que les vraies, les fausses valeurs s'enregistrent correctement dans la fonction de succès
Mikelangelo

23
Soyez prudent avec cela. Ce n'est pas du code entièrement fonctionnel dans la mesure où le «succès» AJAX va revenir après la «réponse de retour»; s'exécute, entraînant des comportements inattendus
Malachi

1
@Malachi est correct. Cela peut être résolu en effectuant un appel de synchronisation à la place, mais c'est désagréable. Je me demande s'il y a un autre moyen d'y parvenir? Il y en a remotecomme d'autres l'ont suggéré mais pour autant que je sache, cela ne permet qu'une seule validation, donc cela ne fonctionnerait pas si vous avez besoin de deux validations asynchrones ou si vous avez plusieurs messages d'erreur en fonction de la réponse.
Adam Bergmark

2
il existe une méthode à distance pour valider 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 }    
});

7
addClassRules est un bon ajout à la réponse.
Quatre

@commonpike C'est exactement ce que je cherchais, merci beaucoup.
Simba

46

Règle personnalisée et attribut de données

Vous pouvez créer une règle personnalisée et l'attacher à un élément à l'aide de l' dataattribut à l'aide de la syntaxedata-rule-rulename="true";

Donc, pour vérifier si au moins une case d'un groupe de cases à cocher est cochée:

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

Et vous pouvez également remplacer le message d'une règle (par exemple: au moins 1 doit être sélectionné) en utilisant la syntaxe data-msg-rulename="my new message".

REMARQUE

Si vous utilisez la data-rule-rulenameméthode, vous devrez vous assurer que le nom de la règle est entièrement en minuscules. En effet, la fonction de validation jQuery dataRuless'applique .toLowerCase()à comparer et la spécification HTML5 n'autorise pas les majuscules.

Exemple de travail

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


2
uniquement pour jquery.validate ver> = 1.10
Pavel Nazarov

Je n'ai pas pu le trouver pour la vie dans la documentation officielle, j'aurais souhaité qu'ils soient plus clairs. Merci!
Josh Mc

22

Merci, ça a marché!

Voici le code 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");

13

Vous pouvez ajouter une règle personnalisée comme celle-ci:

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

Et ajoutez-le comme une règle comme celle-ci:

PhoneToggle: {
    booleanRequired: 'on'
}        

1

Dans ce cas: formulaire d'inscription de l'utilisateur, l'utilisateur doit choisir un nom d'utilisateur qui n'est pas pris.

Cela signifie que nous devons créer une règle de validation personnalisée, qui enverra une demande http asynchrone avec un serveur distant.

  1. créez un élément d'entrée dans votre html:
<input name="user_name" type="text" >
  1. déclarez vos règles de validation de formulaire:
  $("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. le code distant doit être comme:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.