Bootstrap snippet Highlight textbox instead of error message using jquery validations

This bootstrap snippet "Highlight textbox instead of error message using jquery validations" was 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 2016, 07:45
1.1K Views