2016-08-05 29 views
3

Ich benutze MaterializeCSS, um ein E-Mail-Formular anzuzeigen und wenn die E-Mail-Validierung fehlgeschlagen ist, möchte ich ein "Anhaltspunkt" -Element ausblenden.Wie kann ich ein Element entfernen, wenn ein anderes angezeigt wird?

.input-field .clue { 
 
\t color: #666; 
 
\t font-family: 'Nothing You Could Do', cursive; 
 
\t margin-top:-0.8rem; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 

 
<form id="testForm"> 
 
<div class="input-field"> 
 
<input id="email" type="email" class="validate" required="" aria-required="true"> 
 
<label for="email" data-error="wrong email adress" data-success="right">Email</label> 
 
<p id="clue-email" class="clue">We don't spam, never !</p> 
 
</div> 
 
</form>

Wenn Sie versuchen, die Eingabe „test“ als E-Mail-Adresse, werden die Warnmeldung und der Hinweis Nachricht gemischt. Ich möchte die Hinweisnachricht ausblenden ("Wir spammen nicht, niemals!"), Wenn die Warnmeldung erscheint ("falsche E-Mail-Adresse")

Ich weiß nicht, ob ich das in reinem CSS machen soll oder in Jquery.

Vielen Dank für Ihre Hilfe,

Grüße,

Axel

Antwort

3

Seit inputinvalid oder valid Klasse bekommt, können Sie die folgende CSS-Regel hinzufügen, die alle Elemente mit hide-on-input-message Klasse versteckt, die nach input in demselben input-field:

.input-field input.invalid ~ .hide-on-input-message, 
.input-field input.valid ~ .hide-on-input-message 
{ 
    display: none; 
} 

Aktualisiert Schnipsel:

.input-field .clue { 
 
\t color: #666; 
 
\t font-family: 'Nothing You Could Do', cursive; 
 
\t margin-top:-0.8rem; 
 
} 
 

 
.input-field input.invalid ~ .hide-on-input-message, .input-field input.valid ~ .hide-on-input-message { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 

 
<form id="testForm"> 
 
<div class="input-field"> 
 
<input id="email" type="email" class="validate" required="" aria-required="true"> 
 
<label for="email" data-error="wrong email adress" data-success="right">Email</label> 
 
<p id="clue-email" class="clue hide-on-input-message">We don't spam, never !</p> 
 
</div> 
 
</form>