jQuery验证插件:成功函数

Question

我正在使用jQuery验证插件来验证用户名是否已存在.

验证工作正常,如果验证成功,我想在输入元素后插入一个图标.代码是这样的:

$(function () {
    $("#register").validate({
        //...
        success: function(element) {
           if (element.is('input[name="name"]')) {

               //'<i class="fa fa-check fa-lg"></i>' is an icon
               $('input[name="name"]').after('<i class="fa fa-check fa-lg"></i>');
           }
        },
    //...
    });
});

Answer 1

第一个参数success是label元素,而不是input

jQuery(function($) {
  var validator = $('#myform').validate({
    rules: {
      name: {
        required: true,
        minlength: 3
      },
      somefield: {
        required: true,
        minlength: 5
      }
    },
    messages: {},
    success: function(label, elem) {
      var element = $(elem);
      if (element.is('input[name="name"]') && !element.next().is('i.fa-check')) {
        element.after('<i class="fa fa-check fa-lg"></i>');
      }
    }
  });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myform" method="post" action="">
  <input name="name" />
  <input name="somefield" />
  <input type="submit" value="Save" />
</form>