web-dev-qa-db-fra.com

Validation jQuery: modification dynamique des règles

J'ai un seul formulaire qui, en fonction du bouton radio sur lequel vous cliquez (Connexion ou Inscription), affiche soit:

  • adresse e-mail
  • mot de passe

ou:

  • prénom
  • âge
  • adresse e-mail
  • mot de passe

Cliquer sur le bouton radio pour basculer la visibilité des champs de connexion/inscription:

<form id="myForm">
    <input name="userAction" type="radio" value="login" checked="checked">Login</input>
    <br />
    <input name="userAction" type="radio" value="signup">Sign Up</input>

    <div id="loginFields" style="display:none">
        <!-- Login fields (email address and password) -->
    </div>

    <div id="signupFields" style="display:none">
        <!-- Signup fields (name, age, email address, password) -->
    </div>
</form>

J'utilise le plug-in de validation jQuery , et j'aimerais utiliser les règles suivantes:

var signupRules = {
    emailAddressTextBox:
    {
        required: true,
        email: true 
    },
    passwordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    }
};

var loginRules = {
    nameTextBox:
    {
        required: true,
        maxlength: 50
    },
    loginEmailAddressTextBox:
    {
        required: true,
        email: true 
    },
    loginPasswordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    },
    loginPasswordAgainTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        equalTo: "#loginPasswordTextBox"
        passwordValidationRule: true // custom regex added with $.validator.addMethod()        
    }
};

Comment puis-je ajouter dynamiquement la règle de validation correcte en fonction de:

   $("input[name='userAction']").change(function() {
        if ($("input[name='userAction']:checked" ).val() === "login") {
            // use loginRules
        } else {
            // use signupRules
        }
    });

J'ai essayé ce qui suit:

$("#myForm").validate({
    rules: ($("input[name='userAction']:checked" ).val() === "login") ? loginRules : signupRules;
});

Mais comme mes champs de connexion sont affichés par défaut, ses validations fonctionnent, mais pas le scénario d'inscription; il veut valider les champs de connexion pour une raison quelconque. Suis-je en train de manquer quelque chose?

jqueryjquery-validate
45
Bullines

Ahh plugin de validation, toujours aussi délicat :(

Tout d'abord, j'ai ajouté des attributs id à toutes les zones de saisie. Ensuite, j'ai fait une fonction de changement pour vous:

$("input[name='userAction']").change(function() {
    $('#signupFields').toggle();
    $('#loginFields').toggle();    
    if ($("input[name='userAction']:checked").val() === "login") {
        removeRules(signupRules);
        addRules(loginRules);
    } else {        
        removeRules(loginRules);
        addRules(signupRules);

    }
});

Les fonctions d'ajout et de suppression ressemblent à ceci:

function addRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('add',rulesObj[item]);  
    } 
}

function removeRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('remove');  
    } 
}

C'est à peu près ça. Voir ici pour un exemple de travail: http://jsfiddle.net/ryleyb/wHpus/66/

[~ # ~] edit [~ # ~] : Pour moi, la partie non intuitive est que je ne vois pas de moyen facile d'ajouter/supprimer les règles de l'ensemble du formulaire après avoir appelé validate, à la place, vous devez manipuler les différents éléments du formulaire.

55
Ryley

Ou vous pouvez utiliser la propriété depend .

http://jqueryvalidation.org/category/plugin/ la recherche dépend

Exemple: spécifie un élément de contact comme requis et comme adresse e-mail, cette dernière dépendant d'une case à cocher vérifiée pour le contact par e-mail.

$(".selector").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email:checked")
        }
      }
    }
  }
});
34
robert

Si vous souhaitez appeler valider à nouveau avec de nouveaux paramètres (règles, messages ... etc.) appelez

$('#formid').removeData('validator')

Cela supprimera la validation du formulaire, puis l'initialisera à nouveau avec les nouveaux paramètres

9
Boban Stojanovski

Ce message date d'il y a des années, mais comme il a été vu de nombreuses fois, je pense qu'il serait utile de dire que le plugin jQuery Validation nous permet maintenant de lire, ajouter et supprimer des règles.

Quelques exemples:

  1. Imprimer toutes les règles attachées à #myField: console.log($('#myField').rules());

  2. Supprimez une règle indésirable: $('#myField').rules('remove', 'min');

  3. Ajoutez une nouvelle règle: $('myField').rules('add', {min: 10});

Dites donc si vous souhaitez mettre à jour dynamiquement la valeur minimale requise. Vous pouvez appeler un remove et un add juste après:

// Something happened. The minimum value should now be 100
$('#myField').rules('remove', 'min');
$('#myField').rules('add', {min: 100});

Plus d'informations peuvent être trouvées ici: https://jqueryvalidation.org/category/plugin/#-rules ()

8
FlavioEscobar

Il y a maintenant une option pour ignorer les champs basés sur des critères de sélection, tels qu'invisibles ou désactivés, de sorte que vous n'auriez pas à modifier votre ensemble de règles:

.validate({
  ignore: ":not(:visible),:disabled",
  ...
3
jeeber

essaye ça..

rules: {
    address: {
       required: {
                   depends: function(element) {
                     if (....){
                       return true;}
                     else{
                       return false;}
                   }
                 }
             }
       }

crédit de ici .

3
wwanich

Gardez une trace de l'objet de validation et supprimez/remplacez directement les règles. Fonctionne pour moi avec v1.13.0

var validation = $('#form1').validate(); //Keep track of validation object

//Rule set 1
var validationRulesLogin = {
    headerEmail: {
        required: true,
        email: true
    },
    headerPassword: "required"
};
var validationMessagesLogin = {
    headerEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    headerPassword: "Please enter your password."
};

//Rule set 2
var validationRulesSignup = {
    signupEmail: {
        required: true,
        email: true
    },
    signupPassword: "required",
    signupPassword2: {
        equalTo: "#phBody_txtNewPassword"
    }
};
var validationMessagesSignup = {
    signupEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    signupPassword: "Please enter your password.",
    signupPassword2: "Passwords are not the same."
};

//Toggle rule sets
function validatingLoginForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesLogin;
    validation.settings.messages = validationMessagesLogin;
}
function validationSignupForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesSignup;
    validation.settings.messages = validationMessagesSignup;
}
1
Dan

J'ai rencontré un problème similaire et l'ai résolu en ajoutant une classe "requiredForLogin" à toutes les zones de texte de connexion et une classe "requiredForSignUp" à toutes les zones de texte d'inscription.

Ensuite, utilisez toggleClass de jQuery et addClassRules de jQuery.validate pour activer et désactiver les règles en fonction du bouton sur lequel vous avez appuyé.

function EnableAllValidation() {
    // remove the jquery validate error class from anything currently in error
    //  feels hackish, might be a better way to do this
    $(".error").not("label").removeClass("error");

    // remove any the 'disabled' validation classes, 
    //  and turn on all required validation classes 
    //  (so we can subsequently remove the ones not needed)
    $(".requiredForLoginDisabled").toggleClass("requiredForLoginDisabled requiredForLogin");
    $(".requiredForSignUpDisabled").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableLoginValidation() {
    // reenable all validations
    //  then disable the signUp validations
    EnableAllValidation();
    $(".requiredForSignUp").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableSignUpValidation() {
    // reenable all validations
    //  then disable the login validations
    EnableAllValidation();
    $(".requiredForLogin").toggleClass("requiredForLoginDisabled requiredForLogin");
}
$(document).ready(function () {
    $("input[value='login']").click(function () {
        EnableLoginValidation();
    });
    $("input[value='signup']").click(function () {
        EnableSignUpValidation();
    });

    $("#myForm").validate();
    jQuery.validator.addClassRules({
        requiredForSignUp: {
            required: true
        },
        requiredForLogin: {
            required: true
        }
    });

});
0
JPuchyr

Jetez un coup d'œil à ma réponse https://stackoverflow.com/a/20547836/1399001 . Il comprend un jsfiddle fonctionnel. Dans votre exemple sera quelque chose comme ceci:

$("input[name='userAction']").change(function() {

    var settings = $("#myForm").validate().settings;

      if ($("input[name='userAction']:checked" ).val() === "login") {
            $.extend(settings, {
              rules: loginRules
            });
    } else {
            $.extend(settings, {
              rules: signupRules
            });
    }


    $("#myForm").valid();

});
0
lboullo0