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

时间:2012-12-18 18:15:05

标签: jquery validation conditional

如果“select1”字段中的所选文本是“其他”我想要的规则是: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>

4 个答案:

答案 0 :(得分:1)

更新答案在这里找到一个小提琴: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.");​

答案 1 :(得分:1)

存在多个与JSON格式相关的问题:

  1. 这里有一个额外的closing bracket

    select1: { valueNotEquals: "0" }
        },
    
  2. closing bracket定义末尾和rules定义开头之前的messages遗失了一个comma

    return $(“#select1 option:selected”)。text()==“Other”;                             }             } 的} 下,
            消息:{

  3. 每个选项末尾的额外 <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"} } }); ... 是不必要的

  4. validate.js路径中的空格(这可能是问题其中的一个错字)

    这是更正后的代码:

  5. ...

    {{1}}

答案 2 :(得分:0)

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

这就是你的意思

答案 3 :(得分:0)

您可以删除包含&#34; 0&#34;。

的选项的值
<option>Select here someting</option>

当一个选项不包含值atrribute时,jQuery validate将其处理为空或未给出。

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

您可以添加&#39; required&#39;作为你的选择框的类,所以jQuery验证将提供一个&#34; required&#34;警告。