Validation jQuery mettant en évidence une étiquette pour deux champs

Question

J'ai un formulaire de validation script utilisant le plugin jQuery Validation où pour la zone téléphone, il y a 2 champs, indicatif régional et numéro de téléphone. Cependant, il n'y a qu'une seule étiquette pour les deux champs qui indique "Téléphone". Les deux champs sont obligatoires dans la validation.

Ainsi, lorsqu'il y a une erreur dans le champ du téléphone, l'étiquette est mise en évidence et le message d'erreur est affiché. S'il y a une erreur dans le champ de l'indicatif régional, le message d'erreur est affiché mais l'étiquette ne reçoit pas la classe d'erreur et n'est donc pas mise en évidence.

Quelqu'un peut-il trouver un moyen de mettre en évidence l'étiquette "Téléphone" et d'afficher le message correct lorsque le champ de l'indicatif régional n'est pas validé ? Merci !

Answer 1

Vous pouvez écrire une règle personnalisée pour le champ téléphone qui vérifie également le champ indicatif régional. Comme

jQuery.validator.addMethod('PHONE',function() { *check both inputs, return true if both correct* })

Answer 2

J'ai rencontré le même problème où je veux montrer une classe d'erreur pour une étiquette (Date d'expiration) si le mois d'expiration ou l'année d'expiration était vide. Comme le mentionne Steerpike, vous n'êtes pas autorisé à dire quelque chose comme <label for="expirationDate,expirationYear"> donc je vais juste en choisir un et changer l'autre dans un fichier personnalisé. showErrors fonction :

HTML :

<label for="expirationMonth">Expiration Date:</label>
<input type="text" name="expirationMonth"> / <input type="text" name='expirationYear'>

JS :

$("#form").validate({
  .
  .                                           //error messages, rules, etc. go here
  .
  showErrors: function(errorMap, errorList) {
    this.defaultShowErrors();                 //default show errors behavior
    $.each(errorMap, function(key, value) {
      if(key == 'expirationYear') {           //if key is the input without label,
        key = 'expirationMonth';              //make it the label's "for" input
      } 
      $('#form').find('label[for=' + key + ']').addClass('alert');  //add label class
    });
  }
});

Si vous avez d'autres situations de ce type, il vous suffit d'ajouter une autre instruction if / else if.

Answer 3

Associer une étiquette à deux éléments est en fait du html invalide et non recommandé.

Desde el w3 spec :

Chaque élément LABEL est associé à un seul contrôle de formulaire.

Je suggère d'ajouter un deuxième élément d'étiquette pour le code postal et de le supprimer visuellement de l'écran si vous ne voulez pas qu'il soit vu par l'utilisateur en fixant sa marge à -999em ou une méthode similaire.