jQuery Validation doesn't highlight my select field on error

Question

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.

Answer 1

We tell jQuery to highlight the errored fields by generally putting the style for the input element, for example:

input.error {
    border: 2px solid #CC0000
}

Ensure that you add the style for the select elements as well, like:

select.error {
    border: 2px solid #CC0000
}

Answer 2

You have

<option value="">Please choose debt amount</option>

But you're testing for value == "0" so you either need to change the <option> value or the logic of the selectNone method.

Answer 3

select.error doesn't work since select is actually hidden by jQuery Mobile. Instead, there is a wrapping DIV that implements a nice select. Thanks to this we can style it nicely but on the other hand this generates this error styling problem.

Try this solution jQuery Validate - Add Error Class to Parent Div. It seems work fine. You will have to write JS code since you probably will want to use jQuery validation and error class will NOT be assigned to select wrappers...

Dmitry Kresin, Web development

Answer 4

I'm guessing it has something to do with the fact that <select> tags sometimes are left out by validators because they don't fall under the normal <input> tags. Make sure the vaildator is looking for <select> tags to validate.