[解決済み] chosen」プラグインでjQueryバリデーションを使用するには？

質問

私はいくつかの <select> の入力に 選択プラグイン を使用している場合、クライアント側で "required" として検証したいことがあります。このプラグインは実際の select 要素を隠して div と spans でウィジェットを作成するため、ネイティブ HTML5 検証が正しく機能しないようです。フォームは送信されませんが (これは良いことです)、エラー メッセージが表示されないため、ユーザーは何が問題なのかわかりません (これは良くありません)。

私はjQueryのバリデーションプラグインに目を向けましたが（いずれは使うつもりでした）、今のところ運がありませんでした。以下は私の テストケース :

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

これは select を空の値で通してしまい、バリデーションやエラーメッセージを表示しません。コメントアウトすると chosen() 行をコメントアウトすると、それはうまく動作します。

どのようにすれば chosen() の入力をjQuery validationプラグインで検証し、無効なものにはエラーメッセージを表示するにはどうしたらよいでしょうか？

どのように解決するのですか？

jQuery validateはhidden要素を無視しており、Chosenプラグインはhidden要素に visibility:hidden 属性をselectに追加するので、試してみてください。

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

または

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select

の直前にこの行を追加します。 validate() 関数の前に追加してください。私はこれでうまくいきました。