如何使用jquery.Validate和jquery.multiselect下拉菜單？

所以情況是這樣的：試圖添加一個下拉框使用jquery.multiselect插件在當前使用jquery.validate插件，其他領域（文本輸入字段，具有float值範圍的單個文本輸入）的所有當前驗證正確。如何使用jquery.Validate和jquery.multiselect下拉菜單？

當我嘗試添加驗證規則時，我無法獲取jquery.validate來驗證我的多選下拉列表。下面是我的代碼片段（所有假設需要的插件加載 - 請參閱下面的使用版本）：

的HTML：

<form action="some/action" id="myForm" method="POST"> 
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/> 
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/> 
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/> 
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple"> 
     <option value="some_val1">Some Value</option> 
     <option value="some_val2">Some Other Value</option> 
    </select> 
    <input type="submit" value="Submit" /> 
</form>

的JavaScript：

$(document).ready(function() { 
    $('#mySelect').multiselect({ 
     noneSelectedText: 'Select Something (required)', 
     selectedList: 3, 
     classes: 'my-select' 
    }); 

    $.validator.addMethod("needsSelection", function(value, element) { 
     return $(element).multiselect("getChecked").length > 0; 
    }); 

    $.validator.addMethod("isPercent", function(value, element) { 
     return parseFloat(value) >= 0 && parseFloat(value) <= 100; 
    }); 

    $.validator.messages.needsSelection = 'You gotta pick something.'; 
    $.validator.messages.isPercent = 'Must be between 0% and 100%'; 

    $('#myForm').validate({ 
     rules: { 
      mySelect: "required needsSelection", 
      input1: "required isPercent", 
      input2: "required", 
      input3: "required" 
     }, 
     errorClass: 'invalid' 
    }); 
});

版本如果在版本之間存在兼容性的明確/已知問題，那麼我可能會升級德如果解決了這個問題，但我已經測試了使用最新版本的目的，它似乎沒有解決我的問題。

jQuery的：1.4.4

jquery.validate：1.9.0

jquery.multiselect：1.8

而且，一如既往，我可以提供更多的信息，其中可能/需要。

來源

2011-12-16 Mattygabe

如此看來，我建立了多選的規則確實正在連接到選擇，然而，由於原始選擇框是:hidden,jquery.multiselect，因此默認jquery.validate忽略任何隱藏的輸入。

解決方案（這不是我自己的 - 同事發現它）是使用ignore設置jquery.validate。無論選擇傳遞與ignore設置被放入一個jQuery .not()，因此該解決方案實際上是使用雙重否定的位置：

$('#myForm').validate({ 
    rules: { 
     mySelect: "required needsSelection", 
     input1: "required isPercent", 
     input2: "required", 
     input3: "required" 
    }, 
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select 
    errorClass: 'invalid' 
});

唷！

來源

2011-12-19 15:11:05 Mattygabe

你真的幫了我！ :) – 2012-06-29 19:20:36

在我看來，你的兩個選擇選項帶有一個值。

value="some_val1"

嘗試增加在用的什麼值頂部的選項，並選擇：

<option selected="" value="">Please Select Something</option>

來源

2011-12-16 21:36:40 Koder

這並不解決問題。 – Mattygabe 2011-12-16 21:40:13

另一種可能的解決方案是明確指定的元素來驗證：

$("form").children("input, select, textarea").valid()

這將驗證隱藏選擇爲好。

其實，我剛剛遇到的情況出現了，因爲我想用一部分多步的形式來驗證沒有其他辦法：

$("form").find("[data-stepIndex='1']").children("input, select, textarea").valid()

希望它可以幫助別人

來源

2013-02-19 20:11:56 parliament

如何使用jquery.Validate和jquery.multiselect下拉菜單？

回答

相關問題