JQuery validation does not highlight my select box on error

Question

I am trying to apply a drop-down check (so if the value is 0 of <select><option value="0">), then the background color is yellow, as 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 on top. I also announced a new check method called selectNone, which should check if this value is 0 and set the color bg to yellow.

Here is my html if this 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 your help on why it doesn't work.

Answer 1

We tell jQuery to highlight the error fields by adding a style to the element input, for example:

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

, , :

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

Answer 2

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

value == "0", <option> selectNone.

Answer 3

, - , <select> , <input>. , vaildator <select> .

Answer 4

select.error , select jQuery Mobile. DIV, . , , , .

Try this jQuery Validate solution - add an error class to the parent Div . It seems to be working fine. You will need to write JS code, since you probably want to use jQuery validation, and the error class will NOT be assigned to select wrappers ...

Dmitry Kresin, Web Development