Jquery validate doesn't add success class -
i have problem jquery validate (v. 1.11.1) driving me insane... have following contact form (i'm using bootstrap):
<form class="form-horizontal" id="contact-form" name="contact-form" role="form" method="post" enctype="multipart/form-data" action=""> <fieldset> <div class="form-group"> <label for="name" class="col-sm-2 control-label">name</label> <div class="col-sm-10 controls"> <input type="text" class="form-control" id="name" name="name" placeholder="name"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">email</label> <div class="col-sm-10 controls"> <input type="email" class="form-control" id="email" name="email" placeholder="email"> </div> </div> <div class="form-group"> <label for="message" class="col-sm-2 control-label">message</label> <div class="col-sm-10 controls"> <textarea class="form-control" rows="7" id="message" name="message"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-success btn-lg pull-right">send</button> </div> </div> </fieldset> </form> this validation code:
$(document).ready(function(){ $('#contact-form').validate( { rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, message: { minlength: 2, required: true } }, errorplacement: function(error, element) {}, highlight: function(element) { $(element).closest('.form-group').removeclass('has-success').addclass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeclass('has-error').addclass('has-success'); } }); }); the problem success function doesn't add "has-success" class. success function fired (i tried putting alert() in it). error class being added correctly.
i have tried specify success class with: validclass: "has-success" adds class input, while need add parent .form-group
any appreciated.
thanks
you need use function unhighlight, instead of success.
unhighlight: function (element) { $(element) .closest('.form-group') .removeclass('has-error') .addclass('has-success'); } check out fiddle: http://jsfiddle.net/ml5vq/
also, remember close input tags
Comments
Post a Comment