web-dev-qa-db-fra.com

validation jQuery - Deux champs, nécessaires pour en remplir un seul

J'utilise le plugin jQuery Validation sur mon formulaire. Sur mon formulaire, j'ai un champ "Téléphone" et un "Numéro de mobile". champ.

Comment pourrais-je faire en sorte que l'utilisateur doive remplir l'un d'entre eux, mais ce peut être l'un ou l'autre des champs?

jqueryjquery-validate
46
Probocop

Cela ressemble à ce que vous devez utiliser dependency-callback

Ce que cela vous permettra de faire est:

Rend l'élément requis, en fonction du résultat du rappel donné.

Vous pouvez ensuite placer une règle de validation required sur les deux champs de téléphone qui ne seront requis 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 demander que cette règle ne soit requise que si le champ mobile est vide et inversement pour le champ mobile.

Ceci 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 les réponses mises à jour possibles.

59
Jeff Wilbert

Je pense que la bonne façon de faire est d'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: 

<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 

40
eveevans

Je suis venu chercher les 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 "pas vide". Cela garantit que l'utilisateur entre un numéro de téléphone valide avant de supprimer la classe "requise" du champ Mobile et inversement.

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

L'exigence est la validation doit être C ou (A et B) est requis. Ce 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"
2
Vik18

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

0
Vijayan Jayaraman

J'ai eu des problèmes avec .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 obligatoire, ce qui n'est pas vrai dans cette situation.

0
Warren

Cela fera

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