jQuery验证不需要'；t在出现错误时突出显示我的选择字段

我正在尝试应用下拉式验证（因此，如果值等于a

的0），那么它将应用黄色背景色，就像它对其余输入字段所做的一样。这是我的密码：

<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>

jQuery.validator.addMethod(
“选择无”，
函数（值、元素）{
如果（element.value==“0”）
{
css（{“border”：“1px solid#f00”，“背景色”：“ffffcb”}）；
返回false；
}
否则返回true；
},
“请选择一个选项。”
);
$（文档）.ready（函数（）{
$（“.form_validate”）.validate({
onfocusout:true，
规则：{
邮编：{
要求：正确，
数字：对
},
电话：{
要求：正确，
数字：对
},
选择债务：{
要求：正确，
selectNone:true
},
选择_状态：{
要求：正确，
selectNone:true
}
}
});
$（“input.required，.select”）.blur（函数（）{
var val=$（this.val（）；
如果（val==“0”）{
$（this.css（{“border”：“1px solid#f00”，“背景色”：“ffffcb”}）；
}否则{
$（this.css（{“border”：“1px solid#ccc”，“背景色”：“#fff”}）；
}
});
函数isValidPhoneDigits（val）{
var intRegex=/^\d+$/；
var floatRegex=/^（（\d+（\。\d*）？）|（（\d*\）？\d+）$/；
if（内部正则表达式测试（val）|浮动正则表达式测试（val））{
返回true；
}else{return false}
if（内部正则表达式测试（val）|浮动正则表达式测试（val））{
返回true；
}else{return false}
}
$（“.zip”）.blur（函数（）{
if（isValidPhoneDigits（$（this.val（））&&$（this.val（）.length==5）{
$（this.css（{“border”：“1px solid#ccc”，“背景色”：“#fff”}）；
}否则{
$（this.css（{“border”：“1px solid#f00”，“背景色”：“ffffcb”}）；
}
});
$（“a.popup”）。单击（函数（）{
var href_link=$（this.attr（“href”）；
打开（href_链接，“弹出”，“菜单栏=否，宽度=430，高度=360，工具栏=否，状态=否，目录=否，滚动条=是”）；
返回false；
});
});

我在顶部包括了jquery和验证。我还声明了一个名为selectNone的新验证方法，它应该检查值是否为0，并将bg颜色设置为黄色

这是我的html，如果有帮助的话：

<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>

名字
姓
地址
拉链
城市
陈述
选择加利福尼亚州阿拉巴马州
电子邮件
电话
近似信用卡债务
请选择债务金额
$0-$9,999
$10,000-$19,999
$20,000-$29,999
$30,000-$39,999
$40,000-$49,999
$50,000+
可能在您所在的州不可用。

---

提前感谢您提供的有关它为什么不起作用的帮助。

我猜这与以下事实有关：

标记有时被验证器忽略，因为它们不属于正常的

标记。确保vaildator正在查找要验证的

标记。

您有

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

请选择债务金额

---

但是您正在测试

value==“0”

，因此您需要更改

值或

selectNone

方法的逻辑。

我们告诉jQuery通过通常为

input

元素添加样式来突出显示出错的字段，例如：

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

确保也为选定图元添加样式，如：

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

---

select.error不起作用，因为jQuery Mobile实际上隐藏了select。相反，有一个包装DIV实现了一个漂亮的select。由于这一点，我们可以很好地设置样式，但另一方面，这会产生错误样式问题

试试这个解决方案。它似乎工作得很好。您将不得不编写JS代码，因为您可能需要使用jQuery验证，并且不会将错误类分配给select wrappers

---

Dmitry Kresin，

这不是问题所在，我改变了它，仍然在同一条船上：（使用Firebug或在selectNone方法的开头添加一个警报，以查看验证插件是否正在调用它。此外，它看起来像是在同一个对象上使用.value和.css。如果它是jQuery对象，则仅.css起作用，.value应产生JavaScript错误。如果它是DOM对象，则.css将不起作用，并将产生错误。）JavaScript错误。@Angel，请解释一下这个问题。如果你想与jQuery验证插件一起使用，这绝对是你必须设置一个

select

项的方法。否则它不会起作用。如果你自己已经解决了，为什么不在这里发布一个简短的解决方案（并接受它以获得徽章）