5

わかりました、私はこれが間違っていると思います...しかし、答えが得られないようです。ユーザーが入力フォームに入力した内容が有効であることを示す成功チェックマークまたはインジケーターを作成しようとしています。スクリプトのコメントアウトされた部分は、私が達成しようとしていることのアイデアです。スクリプトは次のとおりです。

$('document').ready(function(){
    $('form').validate({
        rules: {
           a: {required:true, minlength:2},
           b: {required:true}
        },      
        messages: {
           a: {required: "enter your name!"},
           b: {required: "enter the date!"}                        
        },
        errorPlacement: function(error, element) {
        if(element.attr('name') == 'a'){
             $('#name').html(error);                
         }
         if(element.attr('name') == 'b'){
             $('#date').html(error);                
         }
        },
        success: function(error){
            //a: {$('#name').html('nice name!');},
            //b: {$('#date').html('nice date!');}                           
        },
        debug:true
    });
    $('#a').blur(function(){
        $("form").validate().element("#a");
    });
});

そして、ここにhtmlがあります：

<form action="#" id='commentForm'>
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>

最後になりましたが、ここに jsfiddle があります。

http://jsfiddle.net/mmw562/wQxQ8/8/

ご協力いただきありがとうございます。

4

3 に答える 3

6

内部の部分success:は、クラス名または JavaScript コールバック関数であり、他の関数と同じように見えます。しかし、代わりに、プラグイン オプションの配列のように記述しました。また、「成功」と呼ばerrorれているのに、何もないのになぜ渡されるのでしょうか? ドキュメントによると、次のようになります...

success: function(label){
    label.addClass("valid").text("Ok!");                        
},

http://docs.jquery.com/Plugins/Validation/validate#toptions

指定すると、有効な要素を示すエラー ラベルが表示されます。String が指定されている場合は、クラスとしてラベルに追加されます。Function が指定されている場合、ラベルを (jQuery オブジェクトとして) 唯一の引数として呼び出されます。これを使用して、「ok!」などのテキストを追加できます。

これは、基本的な概念を示すためにわずかに変更された jsFiddle です。background-imageおそらく、 の CSS でチェックマークを として使用できます.valid class。

http://jsfiddle.net/wQxQ8/12/

于 2012-11-24T19:58:14.403 に答える
4

考えられる解決策は次のとおりです。

$('document').ready(function(){
    $('form').validate({
        rules: {
           a: {required:true, minlength:2},
           b: {required:true}
        },      
        messages: {
           a: {required: "enter your name!"},
           b: {required: "enter the date!"}                        
        },
        errorPlacement: function(error, element) {
        if(element.attr('name') == 'a'){
             $('#name').html(error);                
         }
         if(element.attr('name') == 'b'){
             $('#date').html(error);                
         }
        },
        success: function(label) {
            var parentId = $(label).parent().attr("id");
            switch(parentId) {
                case "name":
                    $(label).html("nice name");
                    break;
                case "date":
                    $(label).html("nice date");
                    break;
            }                    
        },
        debug:true
    });
    $('#a').blur(function(){
        $("form").validate().element("#a");
    });
});

更新されたフィドル：http：//jsfiddle.net/wQxQ8/13/

于 2012-11-24T20:05:26.670 に答える