2011-01-06 11 views
27

Sto usando il plugin di convalida jQuery e voglio disabilitare l'elemento o il contenitore che crea per visualizzare l'errore 'messaggio'.jQuery Validation - Nascondi messaggio di errore

Fondamentalmente, voglio che l'elemento di input con l'errore abbia la classe di errore ma NON crei un elemento aggiuntivo contenente il messaggio di errore.

È possibile?

Ho appena pensato a una soluzione CSS, ma in realtà non risolve il fatto che l'elemento è ancora in fase di creazione?

<style> 
label.simpleValidationError {display: none !important; } 
</style> 
+1

jQuery basta di per sé non visualizzare o creare qualsiasi tipo di messaggi di errore, si dovrà andare un po 'più nel dettaglio quello che stai facendo e ciò che si sta utilizzando per realizzare questo – Hannes

+1

Siamo spiacenti, io sono usando il plugin jQuery Validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ – Sjwdavies

+0

~ Questo non è ancora un sacco di informazioni aggiuntive, anche se chiarisce alcune cose. Cosa stai facendo quando crei il validatore (opzioni saggia) e come stai elaborando i dati che ti danno? – jcolebrand

risposta

5

È possibile impostare l'opzione showErrors ad una funzione che esegue unico elemento in evidenza:

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

che si basa molto sulla struttura interna del plugin di convalida, però, così non è probabilmente sicuro. Il migliore sarebbe che il plugin esponga un metodo defaultHighlightElements() allo stesso modo in cui lo fa per defaultShowErrors(), ma non è il caso (ancora).

69

Utilizzare l'opzione Validator errorPlacement di una funzione di vuoto:

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

Questo pone in modo efficace i messaggi di errore da nessuna parte.

+0

Ha funzionato per me !! – Ryan

+1

Non ha funzionato per me :( – Jonathan

+0

+1 Soluzione piacevole e concisa a questo! Grazie! – Jonny

5

È inoltre possibile utilizzare questo codice:

jQuery.validator.messages.required = ""; 

$("selector").validate(); 
2

Ho anche avuto lo stesso problema. Non volevo messaggi di errore, solo i punti salienti degli input dei moduli che richiedevano attenzione. I messaggi erano già vuote come <?php $msj='""';?> ma ancora creati gli elementi di errore/contenitori dopo le etichette ..

Quindi, per fermare rapidamente ciò accada ho modificato il file jquery.validate.js commentando l'unica linea in cui si afferma label.insertAfter(element); intorno alla linea 697 +/- ..

È solo una soluzione di noob;) ma ce l'ha fatta!

3

Volevo anche nascondere i messaggi di errore e trasformare i miei campi input e textarea rossi in errore. Ecco un piccolo esempio:

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

e il codice completamente funzionante in caso pause jsfiddle;)

<!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> 
2

Come io sto usando i CSS per lo stile della label.valid, label.error in jQuery validate , questo pulsante ha cancellato tutti gli errori e sinistra e dati nei campi modulo in tatto.

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

+1, bella spiegazione – SagarPPanchal

0

soluzione più semplice con solo i CSS:

label.valid { 
    display: none; 
} 
1

Forse una soluzione molto più semplice e semanticamente preferibile sarebbe quella di usare i CSS

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

No JS richiesto, facile da gestire e qualcuno con uno screen reader avrà effettivamente qualche indicazione che gli è sfuggito qualcosa

+0

Buon punto su lettori di schermo, dovrei prenderlo in account più spesso! – SeanKendle

1

Avevo un progetto sviluppato da un'altra libreria di validazione, volevo aggiungere una libreria valida per utilizzare le sue funzionalità per verificare che il modulo fosse valido o no (la libreria di convalida usata non ha questa caratteristica)

ho biblioteca appena aggiunto validate per la sua caratteristica di convalida CDN

e l'uso al clic:

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

e cercato di nascondere i messaggi di errore che ha sollevato da jquery validate con l'aggiunta di codice CSS:

label.error{ 
    display: none!important; 
} 
0

È possibile aggiungere un onfocus e un onkeyup per rimuovere il messaggio di errore.

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