CODEWITHSUNDEEP
javascriptjqueryvalidation
sunshine
sunshine

Reputation: 1963

jQuery validation plugin:success function

I am using jQuery validation plugin to validate username is already existing or not.

Validation is working, I want to insert an icon after the input element if validation is successful. code is like this:

$(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>');
           }
        },
    //...
    });
});

Upvotes: 0

Views: 1690

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The first argument to success is the label element, not the 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>

Upvotes: 5

Related Questions