jQuery de Validation des Deux champs, seulement tenus de remplir un

Je suis en utilisant le Plugin jQuery Validation sur mon formulaire. Sur mon formulaire, j'ai un 'Téléphone' champ et un "Pas de Mobile. terrain".

Comment pourrais-je aller sur le faire afin que l'utilisateur doit remplir l'un d'entre eux, mais il peut être soit le champ?

Je pense que vous devez trouver un moyen de supprimer une règle d'après l'un est rempli, et de nouveau de retour si ils suppriment la valeur et le type dans le deuxième champ. Qui permettrait de créer dynamiquement votre script de validation. Cela ressemble à une simple solution de ce genre avec jQuery simple, et pas la validation de la bibliothèque.
double possible de jQuery Validate - besoin d'au moins un champ dans un groupe à pourvoir

InformationsquelleAutor Probocop | 2011-11-15

jquery jquery-validate

62

Cela ressemble à ce que vous avez besoin d'utiliser la dépendance de rappel

Ce que cela vous permettra de le faire est:

Rend l'élément nécessaire, en fonction du résultat de la fonction de rappel.

Vous pouvez ensuite placer une required règle de validation sur les deux champs de numéros de téléphone qui ne pourront être nécessaires en fonction du rendement de la fonction de rappel; ainsi vous pouvez mettre une règle sur le champ téléphone à-dire exiger cette règle uniquement si le champ est vide, et vice versa pour le domaine mobile.

C'est non 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 une éventuelle mise à jour des réponses.

Mise à JOUR
```
rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}
```
- Il est (maintenant) un moyen plus simple de le faire: required: "#mobile:empty"
- J'ai une condition similaire, sauf que j'ai besoin seulement d'un message général pour montrer jusqu'en haut (ou en bas) de la forme, en opposition à un message d'erreur à côté de chaque champ dans le formulaire. Dans l'exemple cité, si les deux champs sont vides, je vais voir le même message d'erreur à côté de chaque champ, qui est redondante. Au moins pour ma situation, j'ai besoin de quelque chose comme "Au moins un champ doit être rempli." en haut du formulaire.
- Il y a un problème avec l'utilisation de ce sur textarea éléments. :empty sera vrai pour un textarea. En général, :empty est mal de l'utiliser pour la validation, vous devez chercher des solutions de rechange.
- D'accord. Essayez d'utiliser :filled ou :blank selon la documentation: jqueryvalidation.org/documentation.
- Il n'y a plus besoin d'utiliser un autre plugin, veuillez voir les autres réponses. BTW: le lien est mort.
- Je vous remercie pour cette. J'ai pu résoudre mon problème grâce à la compilation de toutes les réponses de jeff-wilbert, saluce et @cartbeforehorse . Être belle de la réponse pourrait être mis à jour pour refléter les mises à jour.
InformationsquelleAutor Jeff Wilbert
40

Je pense que la bonne façon de le faire est d'utiliser le "require_from_group" la méthode.

Vous pouvez checkit sur http://jqueryvalidation.org/require_from_group-method/

L'exemple est exactement ce que vous êtes à la recherche de:
```
<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});
</script>
```
Il est obligatoire d'inclure additional-methods.js
- Cette méthode fonctionne mieux. Le message est plus clair et les erreurs sont les nettoyer dès que vous tapez à l'intérieur d'un groupé de champs. Avis vous devez inclure additional-methods.js
- Ce doit être la accepté de répondre! Il fait partie de l'api, et plus facile à utiliser.
- Voté comme la accepté de répondre que c'est le plus utile et utilise le plugin, construit dans la fonctionnalité plutôt que réinventer la roue de la solution.
- Un peu juste pour info, même si c'est comme 6 mois à partir de vos messages... en cas d'utilisation et en laissant des commentaires comme ceux-dire quelque chose qui doit être la "accepté" la réponse doit être formulée de manière plus "que de AAAA-MM-JJ ce serait la bonne façon de gérer cette situation basée sur la documentation de l'api". Vous avez à réaliser à la question d'origine est près de 4 ans avant le moment où cette réponse a été publiée et plus que probablement beaucoup de choses ont changé dans la façon de gérer certaines situations.
- Cette une a fonctionné parfaitement pour moi. N'oubliez pas d'inclure additional-methods.min.js ou vous obtiendrez un message d'erreur
InformationsquelleAutor eveevans
27

Venu ici à la recherche pour les mêmes réponses. Trouvé le post ci-dessus très utile. Merci.

J'ai étendu cette solution pour vérifier si l'autre champ est en fait valable, plutôt que de simplement "non vide". Cela garantit que les entrées de l'utilisateur un Numéro de Téléphone valide avant de retirer le "nécessaire" de la classe du champ Mobile et vice versa.
```
Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}
```
- C'est la meilleure réponse, de l'OMI. Les autres ne fonctionne pas pour moi.
- Yep, cela devrait être la bonne réponse
InformationsquelleAutor Barbs

Exigence est la Validation doivent être C ou (A et B) est nécessaire.
La chose qui 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"

InformationsquelleAutor Vik18

J'ai eu de la misère est .is(':empty') voici donc mon travail d'options exemple.

Avant:

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

Tous les champs ont été nécessaire. Mais je voulais email et/ou téléphone afin de 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é le messages option pour donner à l'utilisateur une certaine info car la valeur par défaut des messages dirais que chaque champ est nécessaire, ce qui n'est pas vrai dans cette situation.

InformationsquelleAutor Warren

JS:

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

HTML:

<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.17.0/jquery.validate.min.js"></script>
<form class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>

Une explication pourrait être utile 🙂

InformationsquelleAutor Vijayan Jayaraman

Cela Va faire

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

InformationsquelleAutor Salim Ali

Vous devez vous connecter pour publier un commentaire.