Hey everyone,
I am trying to apply a drop down validation (so if the value is equal to 0 of a <select><option value="0">
) then it applies a background-color of yellow as it does for the rest of my input fields. Here is my code:
<script src="jq.js"></script>
<script src="validate.js"></script>
<script>
jQuery.validator.addMethod(
"selectNone",
function(value, element) {
if (element.value == "0")
{
element.css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
return false;
}
else return true;
},
"Please select an option."
);
$(document).ready(function(){
$(".form_validate").validate({
onfocusout: true,
rules: {
zip: {
required: true,
number: true
},
phone: {
required: true,
number: true
},
select_debt: {
required: true,
selectNone: true
},
select_state: {
required: true,
selectNone: true
}
}
});
$("input.required, .select").blur(function() {
var val = $(this).val();
if (val == "" || val == "0") {
$(this).css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
} else {
$(this).css({"border" : "1px solid #ccc", "background-color" : "#fff"});
}
});
function isValidPhoneDigits(val) {
var intRegex = /^\d+$/;
var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;
if(intRegex.test(val) || floatRegex.test(val)) {
return true;
} else {return false}
if(intRegex.test(val) || floatRegex.test(val)) {
return true;
} else {return false}
}
$(".zip").blur(function(){
if ( isValidPhoneDigits($(this).val()) && $(this).val().length == 5 ) {
$(this).css({"border" : "1px solid #ccc", "background-color" : "#fff"});
} else {
$(this).css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
}
});
$("a.popup").click(function(){
var href_link = $(this).attr("href");
window.open(href_link,"popup", "menubar=no,width=430,height=360,toolbar=no,status=no,directories=no,scrollbars=yes");
return false;
});
});
</script>
I have included jquery and validation at top. I have also declared a new validation method called selectNone which should check if the value is 0 and set the bg color to yellow.
Here is my html if that helps:
<form class="form_validate">
<table cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="al_r">
First Name
</td>
<td>
<input value="" type="text" name="firstname" class="required" />
</td>
</tr>
<tr>
<td class="al_r">Last Name</td>
<td><input value="" type="text" name="lastname" class="required" /></td>
</tr>
<tr>
<td class="al_r">Address</td>
<td><input value="" type="text" name="address" class="required" /></td>
</tr>
<tr>
<td class="al_r">Zip</td>
<td><input value="" type="text" id="zip" name="zip" class="required zip" /></td>
</tr>
<tr>
<td class="al_r">City</td>
<td><input value="" type="text" name="city" class="required" /></td>
</tr>
<tr>
<td class="al_r">State</td>
<td><select class="required select" name="select_state"><option value="">Select State</option><option value="1">California</option><option value="2">Alabama</option></select></td>
</tr>
<tr>
<td class="al_r">Email</td>
<td><input value="" type="text" name="email" class="required email" /></td>
</tr>
<tr>
<td class="al_r">Phone</td>
<td><input value="" type="text" name="phone" class="required" /></td>
</tr>
<tr>
<td class="al_r">Approximate Credit Card Debt</td>
<td><select class="required select" name="select_debt">
<option value="">Please choose debt amount</option>
<option value="1">$0-$9,999</option>
<option value="2">$10,000-$19,999</option>
<option value="2">$20,000-$29,999</option>
<option value="2">$30,000-$39,999</option>
<option value="2">$40,000-$49,999</option>
<option value="2">$50,000+</option>
</select></td>
</tr>
<tr>
<td colspan="2">
<input type="image" src="images/check_elig.gif" height="38" width="300" style="border:none; height:38px; margin-left:20px;" />
</td>
</tr>
<tr>
<td colspan="2" class="al_r small">
May not be available in your state.
</td>
</tr>
</table>
</form>
Thanks in advance for any help as to why its not working.