0

これは別の質問へのフォローアップです。まず、通常の選択リストで検証を機能させる必要がありました。(前編はこちらから)

jQuery Validation ロジックを含む選択メニューがあります。私は ASP.NET MVC を使用しているため、いくつかのカスタム属性がありますが、現在は検証を機能させたいだけなので、属性は重要ではありません。

私はなんとかそれを機能させました（実際、私ではなく、Gajotresが解決しました。）

jQuery UI selectmenu プラグインに拡張したいと思います (プラグインはまだ非公式です - jQuery UI の次のバージョンで公式リリースされる予定ですが、ここで見つけることができます: jQuery UI Select Menu (Unofficial)

スタイリングを機能させることができましたが、検証が再び失敗しました。私は自分のコードとフィドルをここに投稿しています。簡潔にするために、ここに掲載されているコード以外にもあることに注意してください。

jsFiddle (プラグインあり)

jsFiddle (プラグインなし [正常に動作])

予想される行動

「デフォルト」オプションが選択メニューで現在選択されている値である間、ユーザーはフォームを送信できてはなりません。

何らかの理由でフィドルを試したくない場合に備えて、関連するすべてのファイルへのリンクを次に示します。

jQuery

jQuery 検証プラグイン

メニューの選択 (分岐)

Javascript

$(document).ready(function() { 

    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')},  
        },
        messages: {  
            select_list : { valueNotEquals: $('#select_list').attr('data-val-required') }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });

    $("#select_list").selectmenu();
});​

HTML

<form id="form1" action="">
    <select id="select_list" name="select_list">
            <option value="default">Choose...</option>
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input type="submit" id="submit" value="Submit" />
</form>​

CSS

        body {
            font-size: 62.5%;
            font-family: "Verdana",sans-serif;
        }

        fieldset {
            border: 0;
        }

        label, select, .ui-select-menu {
            float: left;
            margin-right: 10px;
        }

        select {
            width: 200px;
        }

        .wrap ul.ui-selectmenu-menu-popup li a {
            font-weight: bold;
}

選択メニューをテーマにするための追加の CSS は、こちらから入手できる selectmenu.css ファイルにあります。

4

2 に答える 2

1

私はあなたの新しい実装の何が問題なのか知っています。私も同じ問題を抱えていました。

検証プラグインは、css表示で要素を検証できません：なし。また、このプラグインを機能させるには、元の選択をカスタムプラグインの下に非表示にする必要があります。

これを示すために私が作成した例を次に示します。

http://jsfiddle.net/Gajotres/64aKZ/

違いを確認するには、このcssブロックにコメント/コメントを外す必要があります。

    #select_list {
         display: block !important;
    }

今、私が見ることができたものから、このプラグインは古い選択ボックスをカバーするために作成されていませんでした（元の表示がブロックされているかどうかは関係ありません）。よろしければ、私が訴えているプラ​​グインを見てください。表示がブロックに設定されている場合でも、古い選択ボックスがカバーされます。

http://jamielottering.github.com/DropKick/

編集 ：

別の解決策があります。cssで遊ぶ必要があります。これを選択ボックスに設定します。

    #select_list {
         display: block !important;
         visibility: hidden;
    }

ここで、古い選択ボックスを新しいもので覆うか、少なくとも新しいものを左側にフロートさせる必要があります。

于 2012-12-29T21:55:39.913 に答える
1

次のコードを jQuery に追加できます。

//set the submit button disabled
$('input[type="submit"]').attr('disabled','disabled');

//trigger a check of the value when the selectbox is changed
$('#select_list').change(function(){
    if($(this).val() != 'default'){
       $('input[type="submit"]').removeAttr('disabled');
    }
});
于 2012-12-29T21:35:35.133 に答える