?
Solved

changing input field background color on jquery validation

Posted on 2008-10-10
3
Medium Priority
?
7,774 Views
Last Modified: 2012-05-05
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?
<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>

Open in new window

0
Comment
Question by:eccen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22687731
This script based on YUI seems to be closer to what you want.  You can do it in jQuery, but it will probably be more work.  You will probably want to redo some of the validation script.
http://blog.jc21.com/staging/jsvalidate_yui.php
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 22793968
In case of an error in the validation, the class error is applied to the form element(s).
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.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 22793972
Oops, saw that you allready applied it... Sorry
0

Featured Post

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question