web-dev-qa-db-fra.com

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

Comment créer une règle simple et personnalisée à l'aide du plug-in jQuery Validate (à l'aide de addMethod ) sans utiliser une expression régulière?

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

javascriptjqueryjquery-validate
338
Edward

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 en appliquant ceci comme ceci:

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

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

351
Mark Spangler
$(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"
            }
        }
    });
});
90
Tracy
// 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 }    
});
70
commonpike

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'attribut data à l'aide de la syntaxe data-rule-rulename="true";.

Donc, pour vérifier si au moins un groupe de cases à cocher est coché:

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 (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 la méthode data-rule-rulename, vous devez vous assurer que le nom de la règle est en minuscule. En effet, la fonction de validation jQuery dataRules applique .toLowerCase() à la comparaison et le HTML5 spec ne ne pas autoriser 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>
41
BenG

Merci, ça a fonctionné!

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

Vous pouvez ajouter une règle personnalisée comme ceci:

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

Et ajoutez-le en règle générale comme ceci:

PhoneToggle: {
    booleanRequired: 'on'
}
11
Bogdan Mates

Dans ce cas: formulaire d’inscription d’utilisateur, l’utilisateur doit choisir un nom d’utilisateur qui n’est pas utilisé.

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

  1. créer 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 à distance devrait être comme:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
1
Siwei Shen 申思维