views:

334

answers:

2

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.

A: 

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.

Plan B
+1  A: 

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.

CalebD
That isn't the issue, i changed it and were still on the same boat :(
Angel
Use Firebug or add an alert to the beginning of the selectNone method to see if the validation plugin is calling it. Also, it looks like you're using .value and .css on the same object. If it is a jQuery object, then only .css will work and .value should produce a JavaScript error. If it is a DOM object, then .css will not work and will produce a JavaScript error.
CalebD