web-dev-qa-db-fra.com

validation jQuery - Masquer le message d'erreur

J'utilise le plug-in de validation jQuery et je veux désactiver l'élément ou le conteneur créé pour afficher le message d'erreur.

Fondamentalement, je veux que l'élément d'entrée avec l'erreur ait la classe d'erreur mais NE crée PAS d'élément supplémentaire contenant le message d'erreur.

Est-ce possible?

Je viens de penser à une solution de contournement CSS, mais cela ne résout pas vraiment le fait que l'élément est toujours en cours de création?

<style>
label.simpleValidationError {display: none !important; }
</style>
jqueryvalidation
28
Sjwdavies

Utilisez l'option validator errorPlacement avec une fonction vide:

$("selector").validate({ errorPlacement: function(error, element) {} });

Cela ne place effectivement les messages d'erreur nulle part.

71
amichair

Vous pouvez également utiliser ce code:

jQuery.validator.messages.required = "";

$("selector").validate();
6
dabuda

Vous pouvez définir l'option showErrors sur une fonction qui effectue uniquement la mise en surbrillance des éléments:

$("selector").validate({
    showErrors: function() {
        if (this.settings.highlight) {
            for (var i = 0; this.errorList[i]; ++i) {
                this.settings.highlight.call(this, this.errorList[i].element,
                    this.settings.errorClass, this.settings.validClass);
            }
        }
        if (this.settings.unhighlight) {
            for (var i = 0, elements = this.validElements(); elements[i]; ++i) {
                this.settings.unhighlight.call(this, elements[i],
                    this.settings.errorClass, this.settings.validClass);
            }
        }
    }
});

Cela dépend beaucoup des composants internes du plug-in de validation, donc ce n'est probablement pas sûr. Le mieux serait que le plug-in expose une méthode defaultHighlightElements() de la même manière que pour defaultShowErrors(), mais ce n'est pas le cas (pour le moment).

5
Frédéric Hamidi

Je voulais aussi masquer les messages d'erreur et activer les champs input et textarea rouge, en cas d'erreur . Voici un petit exemple:

http://jsfiddle.net/MFRYm/51/

et code pleinement fonctionnel au cas où jsfiddle casserait;)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> Demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>    

      <script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>


  <style type='text/css'>
    .error {
    border: 1px solid red;
}
  </style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$( "#email_form" ).validate({
      rules: {
        email: {
          required: true,
          email: true
        }
      }, highlight: function(input) {
            $(input).addClass('error');
        },
    errorPlacement: function(error, element){}
});
});//]]>  

</script>


</head>
<body>
<form name="form" id="email_form" method="post" action="#">
    <div class="item" style="clear:left;">
        <label>E Mail *</label>
        <input id="femail" name="email" type="text">
    </div>
    Type invalid email and press Tab key
</form>

</body>

</html>
3
katalin_2003

J'ai aussi eu le même problème. Je ne voulais pas de messages d'erreur, mais uniquement des points saillants des entrées de formulaire qui nécessitaient de l'attention ... Les messages étaient déjà vides, comme <?php $msj='""';?>, mais créaient toujours les éléments/conteneurs d'erreur après les étiquettes.

Donc, pour éviter cela, j’ai édité le fichier jquery.validate.js en commentant la seule ligne qui indique label.insertAfter(element); autour de la ligne 697 +/- ..

C'est juste une solution de contournement de noob;) mais c'est ce qui a été fait!

2
luisqsm

Comme je me sers de CSS pour nommer label.valid, label.error dans jQuery valider, ce bouton effaçait toutes les erreurs et laissait les données dans les champs de formulaire dans tact.

     <button  onclick="$('label.error').css('display', 'none');return false;">Clear Error </button>
2
user1324471

La solution la plus simple avec uniquement du CSS:

label.valid {
   display: none;
}
1
nightcoder

J'avais un projet développé par une autre bibliothèque de validation, je voulais ajouter une bibliothèque de validation pour utiliser ses fonctionnalités afin de vérifier si le formulaire était valide ou non (la bibliothèque de validation utilisée ne présente pas cette fonctionnalité)

Ma solution était: .__ Je viens d'ajouter validate library par son CDN

et utilisez la fonction de validation au clic:

$(document).on('click','#buttonID',function(){
   var form = $( "#formID" );
   form.validate();
   console.log(form.valid());
});

et essayé de masquer les messages d'erreur soulevés par jquery valider en ajoutant du code CSS:

label.error{
   display: none!important;
}
1
Rega

Peut-être une solution beaucoup plus simple et sémantiquement préférable serait d’utiliser css

label.error {
  position:absolute;
  left:20000px;
  top:0;
  }
input.error {
  border:red 1px;
 }

Aucun JS requis, plus facile à gérer et une personne possédant un lecteur d'écran aura en fait une indication qu'elle a oublié quelque chose

1
Andy B

Vous pouvez ajouter un onfocus et un onkeyup pour supprimer le message d'erreur.

$("selector").validate({
    onkeyup: false,
    onfocusout: false
});
0
Emma