2

divベースのselectフォーム要素でjQuery検証ライブラリを使用したいと思います。ドロップキックライブラリを使用して選択を美化していますが、選択要素がDIVSで再作成されるため、フォームの検証に問題があります。

<select id="permissionGroup" class="dropkick" name="permissionGroup" style="display: none;">
    <option selected="selected" value="">
      Please Select
    </option>
    <option value="1">
      Admin
    </option>
    <option value="2">
      Auditor
    </option>
</select>

上記の選択フィールドは、以下のhtmlに変換されます。

  <div id="dk_container_permissionGroup" class="dk_container dk_theme_default" tabindex="" style="display: block;">
    <span class="value"><a class="dk_toggle" style="width: 131px;"><span class=
    "dk_label">Please Select</span></a></span>

    <div class="dk_options" style="top: 29px;">
      <ul class="dk_options_inner">
        <li class="dk_option_current"><a data-dk-dropdown-value="">Please Select</a></li>
        <li class=""><a data-dk-dropdown-value="1">Admin</a></li>
        <li class=""><a data-dk-dropdown-value="2">Auditor</a></li>
      </ul>
    </div>

バリデーター用に次のカスタムメソッドを作成しましたが、フォーム検証プロセスに適用する方法がわかりません。

$.validator.addMethod(
    "permissionGroupCheck",
    function(value, element){
        var spanValue = $("#dk_container_permissionGroup span.dk_label").text();

        if(spanValue == "Please Select"){
            return false;
        }else{
            return true;
        }
     }
);
4

3 に答える 3

1

これは長い間遅れていた答えであることは理解していますが、解決策を見つけました。元の選択ボックスにdisplay: none;が指定されたため、dropkick ライブラリで検証が機能しません。CSS スタイル。

修正、元の選択ボックス css の強制:

display: block !important;

これにより表示されますが、新しいカスタム選択ボックスがその上にあるため表示されません。

または、次の行をバリデータ構成に追加します。

ignore: ""

プラグインが display: none の要素を無視するのを防ぎます。

于 2012-12-29T00:47:58.960 に答える
1

basistance.de jquery 検証プラグインに ignore を追加して Gajotres を見つけてください!

{ignore:""}

...私のために働いた。

css でこれを修正しようとしたときに、問題に遭遇しました。私が持っていた [1.0.0] の DropKick バージョンでは、選択ボックスがインライン表示: なしで非表示になります。これはスタイルシートから上書きできなかったので、選択ボックスを隠していた dropkick.js の行をコメントアウトする必要がありました:

//$select.hide();

@ プラグインの 150 行目。

最後に、選択ボックスを CSS で手動で画面から引き出して非表示にしました。

 position:absolute; 
 left:-9999em;

うまくいきました。たぶん、新しいバージョンでは隠し方が違うのではないでしょうか?

于 2013-02-06T17:31:30.477 に答える
0

ハイライトおよびハイライト解除機能が役立つ場合があります:)

$('.default').dropkick();
$('.example_form').validate({
    highlight: function (element, errorClass) {         
    $(element).siblings('.dk_container').addClass('error');  
    $('.dk_toggle').css('border', 'none');
    },
    unhighlight: function(element, errorClass) {
    $(element).siblings('.dk_container').removeClass('error');  
    $('.dk_toggle').css('border', '1px solid #ccc');
    }
});

http://jsfiddle.net/jackoverflow/82XvN/

于 2013-02-08T00:33:01.327 に答える