jquery验证插件无法访问成功回调标签

我有一个表格，我想使用jQuery验证插件。我的问题是，我无法访问成功回调中的标签。我可以得到label.attr('for')，但是当我尝试label.attr('id')或label.html()时，我得到未定义。jquery验证插件无法访问成功回调标签

这里是我的调用validate：

<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”属性为“Age”，al所以具有“age18”的“id”属性

来源

2012-09-19 Catfish

你可以提供链接到jquery验证库吗？ –

http://docs.jquery.com/Plugins/Validation。我在旧版本，但我试图更新到最新版本，并没有帮助。 – Catfish

你能举一些我们可以看到这个问题的实例吗？ –

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

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

仅供参考，以验证的showLabel方法创建的标签。它也是与errorPlacement方法的参数error相同的元素。通常，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

来源

2012-09-21 14:30:49 rexmac

感谢您的帮助。我使用了您发布的特定解决方案。 – Catfish

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

<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-06 12:17:05 Nav

jquery验证插件无法访问成功回调标签

回答

相关问题