Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag for Germany

asked on

Jquery validation and backround-color for select.valid

Hello experts.
I using jquery.validate plugin and i want to style the selects that are required false.I want to get green backround to show that the element is OK.
This is working for other inputs but not for the selects.
Below is my code
<style type="text/css" media="screen" >
select {background-color:#FFC; width:200px}
select.valid {background-color: #9F3; width:200px}
select.error {background-color: #F03; width:200px}
input {background-color:#FFC; width:200px}
input.valid {background-color: #9F3; width:200px}
input.error {background-color: #F03; width:200px}
label.error {
	display:block;
	font-size:.8em;
	font-weight:normal;
	font-style:italic;
	color:red;
	margin-left:.5em;
	background-color: transparent;
}
label.error:hover { background:transparent}
label.valid {
	display: block;
	width: 16px;
	height: 16px;
	}

</style>
<FORM NAME="forgotpw" id="forgotpw" METHOD="POST" ACTION="#CGI.SCRIPT_NAME#">
<table align="center"  cellspacing="0" cellpadding="0">
<tr>
  <td width="20%" rowspan="4" align="center"></td>
  <td width="40%">Choose your secret question (required):</td>
  <td width="40%">
<select name="clue1"  id="clue1">
       <option value="">Select</option>
       <option value="1">What is your favorite color?</OPTION>
       <option value="2">What is the name of your favorite pet?</OPTION>
       <option value="3">What are the last five digits of your Social Security Number?</OPTION>
  </select>
</td>
</tr>
<tr>
<td>Your stored answer is (required):</td>
<td><input type="text" name="clue2" maxlength="50"  value="" ></td>
</tr>
<tr>
<td>Your stored answer is (required):</td>
<td><input type="text" name="clue3" maxlength="50"  value="" class="TfR" ></td>
</tr>

<tr>
  <td>&nbsp;</td>
  <td colspan="2" style="padding-bottom:20px">
<Button type="submit"  name="Register" value="" />Send</button></td>
 </tr>
</table>
</FORM>

<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $("#forgotpw", $(this)).validate({
     rules: {
       clue1: {required: false},
	   clue2: {required: false},
       clue3: {required: true}
      
      
     },
     messages: {
      clue3: "Name is required"
     }
    })
 });
</script>

Open in new window

Avatar of mstrelan
mstrelan
Flag of Australia image

Hi it seems to work ok for me, but it only goes green once the element loses focus. Perhaps you need to attach the change event handler to the click and keypress events
Avatar of Panos

ASKER

Hi.
Can you please make the changes for me?
Avatar of Panos

ASKER

Well i have done something using jQuery.validator.addMethod and it is working.
Can you take a lookplease to give me your opinion?
<style type="text/css" media="screen" >
select {background-color:#FFC; width:200px}
select.valid {background-color: #9F3; width:200px}
select.error {background-color: #F03; width:200px}
input {background-color:#FFC; width:200px}
input.valid {background-color: #9F3; width:200px}
input.error {background-color: #F03; width:200px}
label.error {
	display:block;
	font-size:.8em;
	font-weight:normal;
	font-style:italic;
	color:red;
	margin-left:.5em;
	background-color: transparent;
}
label.error:hover { background:transparent}
label.valid {
	display: block;
	width: 16px;
	height: 16px;
	}

</style>
<FORM NAME="forgotpw" id="forgotpw" METHOD="POST" ACTION="#CGI.SCRIPT_NAME#">
<table align="center"  cellspacing="0" cellpadding="0">
<tr>
  <td width="20%" rowspan="5" align="center"></td>
  <td width="40%">Choose your secret question (not required):</td>
  <td width="40%">
<select name="clue1"  id="clue1">
       <option value="">Select</option>
       <option value="1">What is your favorite color?</OPTION>
       <option value="2">What is the name of your favorite pet?</OPTION>
       <option value="3">What are the last five digits of your Social Security Number?</OPTION>
  </select>
</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><select name="clue4"  id="clue4">
       <option value="">Select</option>
       <option value="1">What is your favorite color?</OPTION>
       <option value="2">What is the name of your favorite pet?</OPTION>
       <option value="3">What are the last five digits of your Social Security Number?</OPTION>
  </select></td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><select name="clue5"  id="clue5">
       <option value="">Select</option>
       <option value="1">What is your favorite color?</OPTION>
       <option value="2">What is the name of your favorite pet?</OPTION>
       <option value="3">What are the last five digits of your Social Security Number?</OPTION>
  </select></td>
</tr>
<tr>
<td>Your stored answer is (not required):</td>
<td><input type="text" name="clue2" maxlength="50"  value="" ></td>
</tr>
<tr>
<td>Your stored answer is (required):</td>
<td><input type="text" name="clue3" maxlength="50"  value="" class="TfR" ></td>
</tr>

<tr>
  <td>&nbsp;</td>
  <td colspan="2" style="padding-bottom:20px">
<Button type="submit"  name="Register" value="" />Send</button></td>
 </tr>
</table>
</FORM>

<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validate.min.js"></script>

<script type="text/javascript">
jQuery.validator.addMethod(
  "selectNone",
  function(element) 
     {return true;
  }
);

$(document).ready(function(){
   $("#forgotpw", $(this)).validate({
     rules: {
	   clue1: {required: false,selectNone: true
},
	   clue2: {required: false},
       clue3: {required: true},
	   clue4: {required: false,selectNone: true},
	   clue5: {required: true}
      },
     messages: {
      clue3: "Name is required",
	  clue5: "Select one"
     }
    })
 });
</script>

Open in new window

SOLUTION
Avatar of mstrelan
mstrelan
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial