eccen
asked on
changing input field background color on jquery validation
I am implementing jquery form validation and would like to have the input field background color changed depending on the validation status. (red on error and green on success)
I got to a point where the background color changes on error but the input field becomes... 'ugly' looking one. How do I change only the background color?
Also is there a way to change the background color / message when the input entry is valid or successful?
I got to a point where the background color changes on error but the input field becomes... 'ugly' looking one. How do I change only the background color?
Also is there a way to change the background color / message when the input entry is valid or successful?
<html>
<head>
<script 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>
<style type="text/css">
#commentForm label.error {
font-size:11px;
color:red;
}
label.valid {
background: url('/js/jquery/img/valid.gif') no-repeat;
height:21px;
width:21px;
display:block;
padding-left: 21px;
}
input.error, input select.error {
background-color: red;
}
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate({
rules: {
cemail: {
required: true,
email: true
}
},
messages: {
cemail: {
required: "<img src='/img/invalid.gif' style='vertical-align: bottom; margin-left: 5px;'><br>Please enter the Email address",
email: "<img src='/invalid.gif' style='vertical-align: top; margin-top:1px; margin-left: 5px;'><br>Invalid Email address"
}
},
submitHandler: function() { alert("Submitted!") }
});
});
</script>
</head>
<body>
<form id="commentForm" name="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cemail">E-Mail</label>
<em>*</em>
<input id="cemail" name="cemail" size="25" />
</p>
</fieldset>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oops, saw that you allready applied it... Sorry
You can define an .error rule in your css.
Specify background-color in this rule.
There's no rule applied in case of succesfull validation.