Panos
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
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> </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>
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
ASKER
Hi.
Can you please make the changes for me?
Can you please make the changes for me?
ASKER
Well i have done something using jQuery.validator.addMethod and it is working.
Can you take a lookplease to give me your opinion?
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> </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> </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> </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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.