Advertisement

10.10.2008 at 02:36AM PDT, ID: 23803564 | Points: 500
[x]
Attachment Details

changing input field background color on jquery validation

Asked by eccen in Jquery, JavaScript, Cascading Style Sheets (CSS)

Tags: ,

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?Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:

<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>
[+][-]10.10.2008 at 08:32AM PDT, ID: 22687731

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.24.2008 at 12:01AM PDT, ID: 22793968

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.24.2008 at 12:02AM PDT, ID: 22793972

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 - Hierarchy / EE_QW_2_20070628