基于选择文本的 Jquery 条件验证答案

【问题标题】：Jquery Conditional validation based on select text基于选择文本的 Jquery 条件验证
【发布时间】：2012-12-06 00:21:17
【问题描述】：

只有当“select1”字段中的选定文本是“other”时，我才想将“other”字段设为必需，我正在尝试的规则是：other: { required: function(element){ return $("#select1 option:selected").text() == "Other"; } }我做错了什么吗？代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-  validation/jquery.validate.js"></script>
  <script>
  $(document).ready(function(){
    $('form:first').validate({
        rules: {
          cname: {
          required: true,
        },
        select1: { valueNotEquals: "0" }
        },
        other: {
                required: function(element){
                            return $("#select1 option:selected").text() == "Other";
                        }
        },   
        messages: {
          cname: "Please enter a valid naaaammmeeee.",
      select1: "Please choose a valid option",
      other: "Please enter a valid other value",
        },
      });

       $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
        }, "Value must not equal arg.");
  });
  </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="cname"/>
   </p>
   <p>
   <select name="select1" id="select1">
    <option value="0">Please choose a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">Other</option>
    </select>
    </p>
    <p>
    <label for="other">Other</label>
        <em>*</em><input id="other" name="other"/>
   </p>
       <p>
       <input class="submit" type="submit" value="Submit"/>
       </p>
 </fieldset>
 </form>
</body>
</html>

【问题讨论】：

您到底想在这里实现什么？能具体点吗？

标签： jquery validation conditional

【解决方案1】：

$('select').change(function() {
   var text = $('select option:selected').text();
   if(text == 'Other') {
       $('input[name=other]').attr('disabled', false);        
    }
  });

这就是你的意思

【讨论】：

如果描述不清楚，我们深表歉意。仅当“select1”字段中的选定文本为“other”时，我才想将“other”字段设为必需，我正在尝试的规则是：other: { required: function(element){ return $("#select1 option :selected").text() == "其他"; } },

【解决方案2】：

您可以删除包含“0”的选项值。

<option>Select here someting</option>

当一个选项不包含值atreribute时，jQuery验证将此缩小为空或未给出。

<select class="required"><option>Select here someting</option></select>

您可以将“必需”作为类添加到您的选择框，以便 jQuery 验证会提示“必需”警告。

【讨论】：

【解决方案3】：

更新了答案在 fiddle 这里找到一个演示：http://jsfiddle.net/3jrTM/

$('form:first').validate({
rules: {
    cname: {
        required: true
    },
    select1: {
        valueNotEquals: "0"
    },
    other: {
        required: function(element) {
            return $("#select1 option:selected").text() == "Other";
        }
    },
},
messages: {
    cname: "Please enter a valid naaaammmeeee.",
    select1: "Please choose a valid option",
    other: "Please enter a valid other value"
}

});

$.validator.addMethod("valueNotEquals", function(value, element, arg) {
return arg != value;
}, "Value must not equal arg.");

【讨论】：

谢谢杰。那部分正在工作。以下规则给我带来了问题。
对不起 Jai，我离开了一天。非常感谢您的回答。

【解决方案4】：

存在多个主要与 JSON 格式相关的问题：

这里有一个额外的closing bracket：
```
select1: { valueNotEquals: "0" }
    },
```
在rules 定义的末尾和messages 定义的开始之前缺少一个closing bracket

return $("#select1 option:selected").text() == "Other"; } } },
消息：{
每个选项末尾的额外comma 是不必要的
validate.js 路径中的空格（这可能是问题 itslef 中的错字）

这里是更正后的代码：

...

    <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
      <script>
        $(document).ready(function(){
    $('form:first').validate({
    rules: {
        cname: { required: true },
        select1: { valueNotEquals: "0" },
        other: { required: function(element){
                            return $("#select1 option:selected").text() == "Other";
                            }
            }
},   
        messages: {
            cname: "Please enter a valid naaaammmeeee.",
            select1: "Please choose a valid option",
            other: { required: "Please enter a valid other value"}
            }
});
...

【讨论】：

谢谢阿马尔。那是一种享受。我对 JQuery 比较陌生，还没有掌握所有的语法规则。非常感谢您的帮助。
干杯人 :) 现在，如果您对答案感到满意，您应该接受答案并养成这样做的习惯。我是说一般:)
对不起，Amar，虽然验证现在正在工作，但我的消息被忽略了，并且默认的“此字段是必需的”正在通过。这里还缺少什么吗？
现在就试试吧。我现在已经编辑了代码，需要稍微改变一下解释，同时你测试上面的代码。
今天刚回来。不，这似乎不起作用。干杯。