0
Que se passe-t-il lorsque vous appuyez simplement sur "Envoyer" seulement la zone de texte message-corps devient rouge, ce qui signifie errorClass: "errorField" a été appliqué à elle comme il se doit, mais l'autre les éléments ne deviennent pas rouges, comme ils devraient. En outre, l'accent est mis correctement sur l'entrée de texte du message électronique, donc errorClass est peut-être correctement appliqué à ce champ, mais lorsque vous modifiez le focus sur le champ objet du message, le champ e-mail du message doit être activé. rouge.jquery validation errorClass ne fonctionne pas correctement
Enfin, comment la classe errorField peut-elle remplacer la classe de focus?
Merci pour votre aide!
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="style/message.css">
<script type="text/javascript">
$(document).ready(function() {
$("#message-form").validate({
errorClass: 'errorField',
errorPlacement: function(error,element) {
return true;
}
});
});
</script>
</head>
<body>
blue = focus, green=notFocus, red=error
<div id="message-wrapper">
<form id="message-form" method="POST" action="">
<table>
<tr>
<td width="70px"><label for="message-email">From:</label></td>
<td><input type="text" name="message-email" id="message-email" class="message-input required email" /></td>
</tr>
<tr>
<td><label for="message-subject">Subject:</label> </td>
<td><input type="text" name="message-subject" id="message-subject" class="message-input required" minlength="5"/></td>
</tr>
<tr>
<td><label for="message-body" style="vertical-align: top">Message:</label> </td>
<td><textarea name="message-body" id="message-body" rows="4" cols="40" class="message-input required"></textarea></td>
</tr>
</table>
<input type="hidden" name="contact" value="1" />
<p><button type="submit">Send</button></p>
</form>
</div>
</body>
CSS:
div#message-wrapper{
width: 300px;
height: 400px;
}
input[type="text"], textarea {
/* background:#F4F4F4; */
background: green;
color: white;
border: solid 2px #DFDFDF;
}
input[type="text"]:focus, textarea:focus {
/* background:#F2F4F8; */
background: blue;
color: white;
border:solid 2px #333;
outline: 0;
}
.errorField{
/* background:#faf6d1; */
background: red;
color:black;
border:solid 1px #333;
}
.message-input{
width: 341px;
}