Bootstrap snippet: Highlight textbox instead of error message using jquery validations

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form,validations



<div class="container"> <div class="col-lg-8"> <form id="your_form_id" class="form-horizontal" action="" method="POST" name="your_form_id"> <div class="form-group"> <label class="col-lg-2 control-label" for="inputEmail1">First Name</label> <div class="col-lg-10"> <input id="first_name" class="required form-control" name="first_name" type="text" placeholder="" /> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputEmail1">Last Name</label> <div class="col-lg-10"> <input id="last_name" class="required form-control" name="last_name" type="text" placeholder="" /> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputEmail1">Email Address</label> <div class="col-lg-10"> <input id="email_address" class="required form-control" name="email_address" type="text" placeholder="" /> </div> </div> <button id="" class="btn btn-default" type="submit">Submit</button> </form> </div> </div> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
body{margin-top:20px;} .has_error{ border: 1px solid red;}
$("#your_form_id").validate({ errorPlacement: function(error, element) { // name attrib of the field var n = element.attr("name"); if (n == "first_name") element.attr("placeholder", "Please enter your first name"); else if (n == "last_name") element.attr("placeholder", "Please enter your last name"); else if (n == "email_address") element.attr("placeholder", "Please enter your email address"); }, rules: { first_name: { minlength: 2, required: true }, last_name: { minlength: 2, required: true }, email_address: { minlength: 6, required: true, email: true } }, highlight: function(element) { // add a class "has_error" to the element $(element).addClass('has_error'); }, unhighlight: function(element) { // remove the class "has_error" from the element $(element).removeClass('has_error'); }, submitHandler: function(form) { // submit form now. } });
srinutest

Highlight textbox instead of error message using jquery validations

srinutest
  Apr 19th, 07:45
879 Views