1

我有一个表单，我正在尝试使用 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>

当我单击其中一个单选按钮时，萤火虫控制台中会出现以下内容：

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回调中访问原始标签，您将需要更直接的方法。

一个解决方案，非常特定于这个特定的标签，是简单地通过它的 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 回答