javascript - jQuery 验证插件 :success function

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>