基於選擇文本的Jquery條件驗證

我想只在「select1」字段中的選定文本是「其他」我想要的規則是：other: { required: function(element){ return $("#select1 option:selected").text() == "Other"; } }我做錯了什麼？下面的代碼：基於選擇文本的Jquery條件驗證

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

來源

2012-12-18 nelsie

你想在這裏實現準確呢？你能更具體嗎？ – Amar

有大多與JSON格式的多個問題：

一個額外closing bracket這裏：

select1: { valueNotEquals: "0" } 
    },

一個closing bracket缺少rules定義的末尾和messages定義

返回$（「＃select1 option：selected」）。 }} }，
消息：{
額外在每個選項結束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"} 
      } 
}); 
...

來源

2012-12-18 18:44:38 Amar

謝謝阿馬爾。這很有用。我對JQuery相對來說比較新，並且還沒有掌握所有的語法規則。非常感謝您的幫助。 – nelsie

歡呼聲:)現在，如果您對答案感到滿意，現在您應該接受答案，並且在將來也會習慣這樣做。我在說一般:) – Amar

對不起Amar，雖然驗證現在正在工作，我的消息被忽略，並且默認的「此字段是必需的」即將通過。這裏還有其他的東西嗎？ – nelsie

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

這是你的意思

來源

2012-12-18 18:19:15 ashley

道歉，如果描述不清楚。我想打只需要如果在「選擇1」字段選擇的文本是「其他」中的「其他」欄我想規則是：其他：{ 要求：功能（元素）{ \t \t \t \t \t \t \t return $（「＃select1 option：selected」）。text（）==「Other」; \t \t \t \t \t \t \t}} ， – nelsie

我已經改變了我的答案。檢查這看到：http://jsfiddle.net/7QJpr/ – ashley

謝謝阿什利。現在正在工作。 – nelsie

您可以刪除選項，其中包含「0」的數值。

<option>Select here someting</option>

當一個選項不包含值atrribute時，比jQuery validate將其處理爲空或未給出。

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

您可以爲類添加「要求」你的選擇框，以便jQuery驗證將PROMT「必要」的警告。

來源

2012-12-18 18:29:49

更新了答案，在小提琴在這裏找到一個演示：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.");

來源

2012-12-18 18:31:21 Jai

謝謝Jai。這部分工作。以下規則會給我帶來問題。 – nelsie

@nelsie查看上面更新的答案和小提琴鏈接。 – Jai

oops downvote。剛更新了答案。 – Jai

基於選擇文本的Jquery條件驗證

回答

相關問題