Question

我有一个表单，我正在尝试使用jquery validate插件。我的问题是我无法访问成功回调中的标签。我可以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>

当我点击其中一个单选按钮时，这就是firebug控制台中显示的内容：

the label for = Age
the label id = undefined

您可以在html代码段中看到带有“年龄”的“for”属性的label标签，也具有“age18”的“id”属性

Answer 1

传递给label回调的success参数不是您认为的标签。 jQuery Validation插件为每个元素生成错误标签以显示错误消息。正是这个生成的标签被传递给success回调。你可以通过添加console.log(label);作为回调的第一行来看到这一点。它将返回以下内容：

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

仅供参考，该标签是在验证器的showLabel方法中创建的。它也是作为error方法的errorPlacement参数传递的相同元素。通常，error元素将附加到导致错误的表单元素（即，无法验证）。

要从success回调中访问原始标签，您需要更直接的方法。

这个特定标签的一个解决方案是通过它的ID简单地访问它，例如

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

更通用的解决方案是：

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

我在下面链接的现场演示中包含了这两种解决方案。

Live Demo

Answer 2

这就是我这样做的方式。能够在输入框旁边放置自定义图像并将其删除并更改输入框的边框颜色。

<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>

jquery validate plugin无法访问成功回调中的标签

2 个答案: