web-dev-qa-db-fra.com

Jquery Validation: Comment rendre les champs rouges

J'utilise jquery et jquery.validate.cs (plug-in jQuery Validation 1.8.0) pour valider un formulaire. En ce moment, il affiche un message à côté d'un champ disant: "Ceci est un champ obligatoire".

Je veux aussi que chaque champ devienne rouge. Comment je ferais ça? Merci!

jqueryformsvalidation
12
sam

Sans configuration personnalisée, vous pouvez simplement faire ceci:

select.error, textarea.error, input.error {
    color:#FF0000;
}
  • La classe par défaut appliquée à une entrée non valide est error
  • La classe par défaut pour une entrée validée est valid.

Ces classes sont également appliquées au libellé d'erreur. Soyez donc conscient de cela lorsque vous écrivez votre code CSS.

Le plugin validation vous permet de configurer ces noms de classe, vous pouvez donc faire quelque chose comme ceci:

$("form").validate({
   errorClass: "my-error-class",
   validClass: "my-valid-class"
});

.my-error-class {
    color:#FF0000;  /* red */
}
.my-valid-class {
    color:#00CC00; /* green */
}

Les options de configuration peuvent être trouvées à http://docs.jquery.com/Plugins/Validation/validate

34
Wesley Murch
$("#myform").validate({
   error: function(label) {
     $(this).addClass("error");
   },
});

utilisez le paramètre errorClass pour ajouter la classe .invalid:

input.error {
    color: red;
}
8
Sujit Agarwal

utilisez Firebug pour voir quelle est la classe de l'élément error, puis utilisez css pour le rendre rouge:

.error-label {
    color: red;
}
1
Stevo

J'ai trouvé ce code dans la documentation officielle . Dans cet exemple, nous mettons en surbrillance à la fois la mauvaise entrée et son étiquette.

$("#myform").validate({
   highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .removeClass(errorClass);
  }
});

Vous pouvez facilement le modifier pour vos besoins.
Voir la documentation complète ici: https://jqueryvalidation.org/validate/#highlight

0
Krivonosov Egor