2011-12-16 3 views
9

したがって、現在jquery.validateプラグインを使用するフォームにjquery.multiselectプラグインを使用してドロップダウンボックスを追加しようとすると、他のフィールド(テキスト入力フィールド、1つのテキスト入力がfloatの値の範囲です)正しくjquery.multiselectドロップダウンでjquery.Validateを使用する方法?

検証ルールを追加しようとすると、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

そして、いつものように、私はより多くの情報を提供することができます可能/必要。

答えて

12

だから、私は複数選択のために設定されたルールが実際に選択に添付されていたようです、ただし、元の選択ボックスは:hiddenjquery.multiselectなので、デフォルトではjquery.validateは非表示の入力を無視します。

ソリューション(これは私のものではなく、同僚が見つかりました)はjquery.validateignoreの設定を使用することです。

$('#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' 
}); 

ふう:ignore設定はjqueryの.not()に入れ、その解決策はここに二重否定を使用することが実際にされてどのようなセレクタが渡されました!

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

にも隠された選択を検証します:

+0

本当に助けてくれました! :) –

+1

なぜ私はいつも自分の問題とその解決方法を投稿しようとしています - 喜んで助けてくれました! :) – Mattygabe

+0

あなたは私を助け、3つ!あなたが言ったように、 "Phew" – HPWD

0

あなたの2つの選択肢のオプションが好きなように見えます。

value="some_val1" 

てみ何の価値と上部のオプションを追加し、選択:

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

を役に立てば幸い:

は実際には、私はちょうど遭遇した状況が、私は、多段階フォームの一部で検証してみたかったので、他に方法はありませんでした。 – Mattygabe

0

別の可能な解決策は、明示的に検証する要素を指定することです。

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

が、それはこの問題が解決しない誰か

関連する問題