jQuery Validation – Deux champs, uniquement requirejs pour en remplir un

J’utilise le plugin de validation jQuery sur mon formulaire. Sur mon formulaire, j’ai un champ “Téléphone” et un “Numéro de portable” champ.

Comment pourrais-je procéder pour que l’utilisateur en remplisse un, mais cela peut être l’un ou l’autre des champs?

Cela ressemble à ce dont vous avez besoin pour utiliser le rappel de dépendance

Ce que cela vous permettra de faire est:

Rend l’élément requirejs, en fonction du résultat du rappel donné.

Vous pouvez ensuite placer une règle de validation required sur les deux champs téléphoniques qui ne seront requirejs que sur la base du retour de la fonction callback; Ainsi, vous pouvez définir une règle sur le champ téléphonique pour indiquer que cette règle est requirejse uniquement si le champ mobile est vide et inversement pour le champ mobile.

Ce n’est pas testé mais en théorie

 rules: { telephone: { required: function(element) { return $("#mobile").is(':empty'); } }, mobile: { required: function(element) { return $("#telephone").is(':empty'); } } } 

Assurez-vous de vérifier les commentaires / autres réponses pour d’éventuelles réponses mises à jour.

Je pense que la méthode correcte consiste à utiliser la méthode “require_from_group”.

Vous pouvez vérifier sur http://jqueryvalidation.org/require_from_group-method/

L’exemple est exactement ce que vous recherchez:

     

Il est obligatoire d’inclure additional-methods.js

Entré ici à la recherche des mêmes réponses. J’ai trouvé le message ci-dessus très utile. Merci.

J’ai étendu cette solution pour vérifier si l’autre champ est en fait valide, plutôt que simplement “non vide”. Cela garantit que l’utilisateur entre un numéro de téléphone valide avant de supprimer la classe “obligatoire” du champ Mobile et vice versa.

 Mobile: { required: function(element) { return (!$("#Phone").hasClass('valid')); } }, Phone: { required: function(element) { return (!$("#Mobile").hasClass('valid')); } } 

L’exigence est que la validation doit être C ou (A et B) est requirejse. La chose a fonctionné pour moi est:

 $.validator.addMethod("multipeFieldValidator", function(value) { var returnVal = false; if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) { returnVal = true; } return returnVal; }, 'Either C or A and B is required'); $('#Afield.form-control').change(function(){ $(this).valid(); $("#Bfield").valid(); $("#Cfield").valid(); }); $('#Bfield.form-control').change(function(){ $(this).valid(); $("#Afield").valid(); $("#Cfield").valid(); }); $('#Cfield.form-control').change(function(){ $(this).valid(); $("#Bfield").valid(); $("#Afield").valid(); }); within rules I have Afield: "multipeFieldValidator", Bfield: "multipeFieldValidator", Cfield: "multipeFieldValidator" 

J’ai eu des problèmes, c’est .is(':empty') alors voici mon exemple d’options de travail.

Avant:

 rules: { name: {required: true}, email: {required: true}, phone: {required: true} } 

Tous les champs étaient obligatoires. Mais je voulais un email et / ou un téléphone pour créer le ‘ou’:

 rules: { name: {required: true}, email: {required: function() { //returns true if phone is empty return !$("#phone").val(); } }, phone: {required: function() { //returns true if email is empty return !$("#email").val(); } } }, messages: { email: "Email is required if no phone number is given.", phone: "A phone number is required if no phone email is given." } 

Et vous verrez que j’ai ajouté l’option messages pour donner à l’utilisateur des informations utiles car les messages par défaut indiqueraient que chaque champ est requirejs, ce qui n’est pas le cas dans cette situation.

 $(document).ready(function () { jQuery.validator.addMethod("mobile10d", function (value, element) { return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value); }, "Please enter a valid 10 digit phone number."); $("#form_id").validate({ rules: { mobile: { required: "#telephone:blank", mobile10d: true }, telephone: { required: "#mobile:blank", mobile10d: true } } }); }); 
   

Cela fera l’affaire

 Mobile: { required: function(element) { return (jQuery.isEmptyObject($("#Phone").val())); } }, Phone: { required: function(element) { return (jQuery.isEmptyObject($("#Mobile").val())); } }