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

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?

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.

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

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>

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

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'
}        

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

2. 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'
      },
    },

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