1

jquery検証プラグインを使用しようとしているフォームがあります。私の問題は、成功コールバックでラベルにアクセスできないことです。取得できますが、またはをlabel.attr('for')試してみると、未定義になります。label.attr('id')label.html()

これが私の検証呼び出しです：

    <script type="text/javascript">
        $(document).ready(function() {
            $('#personal_info').validate({
                rules: {
                    LastName: "required",
                    Age: "required"
                },
                messages: {
                    LastName: "",
                    Age: ""
                },
                errorPlacement: function(error, element) {
                    console.log('element.attr = '+element.attr('name'));
                    if(element.attr('name') == 'Age') {
                            console.log('element = '+element.parents().siblings('label').html());
                            element.parents().siblings('label').removeClass('highlight').addClass('warning');
                    }                                       
                    //error.insertBefore(element.parent().children("br"));
                },

                // specifying a submitHandler prevents the default submit, good for the demo
                submitHandler: function() {
                    document.personal_info.submit();
                },
                validClass: "checkmark",
                // set this class to error-labels to indicate valid fields
                success: function(label) {
                    console.log('the label for = '+label.attr('for'));
                    console.log('the label id = '+label.attr('id'));
                }   
            });
        });
</script>

これが私のhtmlの一部です：

<label for="Age" id="age18" class="highlight">&nbsp;&nbsp;&nbsp;&nbsp;Are you at least 18 years of age?</label>
       <table id="OnlineAppWizard_InputAge18" border="0">
             <tr>
                 <td>
                     <input id="Age18_yes" type="radio" name="Age" value="Yes"  <?
                         if ($Age18 == "Yes") {
                               print "checked";
                         }
                      ?>/>
                     <label for="Age18_yes">Yes</label>
                 </td>
                 <td>
                     <input id="Age18_no" type="radio" name="Age" value="No" <?
                         if ($Age18 == "No") {
                                print "checked";
                         } ?>/>
                     <label for="Age18_no">No</label>
                 </td>
             </tr>
         </table>

ラジオボタンの1つをクリックすると、これがfirebugコンソールに表示されます。

the label for = Age
the label id = undefined

htmlスニペットから、「Age」の「for」属性を持つラベルタグにも「age18」の「id」属性があることがわかります。

4

2 に答える 2

2

labelコールバックに渡されるパラメーターは、successあなたが思っているラベルではありません。jQuery Validationプラグインは、各要素のエラーラベルを生成して、エラーメッセージを表示します。successコールバックに渡されるのは、この生成されたラベルです。console.log(label);これは、コールバックの最初の行として追加することで確認できます。次を返します。

[<label for=​"Age" generated=​"true" class=​"error" style=​"display:​ inline;​ ">​&lt;/label>​]

参考までに、そのラベルはshowLabelバリデーターのメソッドで作成されます。これは、メソッドのerrorパラメーターとして渡されるのと同じ要素でもあります。errorPlacement通常、error要素はエラーの原因となった（つまり、検証に失敗した）フォーム要素に追加されます。

コールバックから元のラベルにアクセスするにsuccessは、より直接的なアプローチが必要になります。

この特定のラベルに非常に固有の1つの解決策は、IDでアクセスすることです。

if(label.attr('for') === 'Age') {
    $('#age18')...    // do something to the label
}

より一般的な解決策は次のとおりです。

$('#personal_info').children('[for="' + label.attr('for') + '"]')...  // do something to label

以下にリンクされているライブデモに両方のソリューションを含めました。

ライブデモ

于 2012-09-21T14:30:49.613 に答える
0

これが私がやった方法です。入力ボックスの横にカスタム画像を配置して削除し、入力ボックスの境界線の色を変更できるようにするため。 

<html>
<head>

    <meta charset="utf-8">
    <title>error handling</title>
    <link rel="stylesheet" media="screen" href="css/screen.css">
    <script src="js/jquery-validation-1.13.1/lib/jquery.js"></script>
    <script src="js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<script>
$(document).ready(function() 
{
$("#someForm").validate({
        rules: 
        {
            param1: {required: true, minlength: 3, maxlength: 15},
            param2: {required: true, minlength: 3, maxlength: 15}
        },
    errorPlacement: function(error, element) 
    {
            element.attr("style","border-color: red");
            element.parent('div').append( '<div id="'+element.attr('id')+"img"+'" class="errorValidationIcon"><a href="#" class="errorValidationTooltip"><img src="img/redError.png" class="errorValidationIcon"/><span><img class="callout" src="img/callout.gif" /><strong></strong><br /></span> </a></div> '); 
            error.appendTo('strong'); 
    },
    success: function(label) 
        {
            if (label.attr('for') === 'param1') 
            {
                $('#param1img').remove();
                $('#param1').attr("style", "border-color: rgb(83,103,141)");
            }
            if (label.attr('for') === 'param2') 
            {
                $('#param2img').remove();
                $('#param2').attr("style", "border-color: rgb(83,103,141)");
            }
        }
    }); 
});

</script>
</head>


<body>
<div id="layoutCenter">
<form id="someForm" action="#">
    <div>
    <div>Register</div>

    <div>
        <div>Blah</div>  
        <div ><div >Parameter<div>*</div></div><div ><input name="param1" id="param1" type="text" /></div></div>
        <div ><div >OID<div>*</div></div><div ><input name="param2" id="param2" type="text" /></div></div>
    </div>

    </div>
</form>
</div>
</body>

</html>
于 2015-02-06T12:17:05.630 に答える