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

Question

Comment créer une règle simple et personnalisée à l'aide du plugin jQuery Validate (à l'aide de la fonction addMethod ) qui n'utilise pas de regex ?

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

Answer 1

Vous pouvez créer une règle simple en procédant comme suit :

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

Et puis on applique ça comme ça :

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

Il suffit de modifier le contenu de la méthode "addMethod" pour valider vos cases à cocher.

Answer 2

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

Answer 3

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

Answer 4

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 la fonction data en utilisant la syntaxe data-rule-rulename="true";

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

données - une ou plusieurs règles vérifiées

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

Vous pouvez également modifier le message d'une règle. (c'est-à-dire qu'au moins 1 doit être sélectionné). en utilisant la syntaxe data-msg-rulename="my new message" .

NOTE

Si vous utilisez le data-rule-rulename vous devrez alors vous assurer que le nom de la règle est en minuscules. Cela est dû au fait que la fonction de validation de jQuery dataRules s'applique .toLowerCase() à comparer et le HTML5 La spécification 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>

Answer 5

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