Highlight textbox instead of error message using jquery validations

This bootstrap snippet called "Highlight textbox instead of error message using jquery validations" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: form,validations

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


body{margin-top:20px;}

 .has_error{ border: 1px solid red;}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview




$("#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. 
								}
							}); 

Information about this bootstrap snippet

Creator: Srinu Sirigiri

Bootstrap version: 3.3.6

Created: Apr 19th 2016, 01:07

Views: 2.4K

Rated 5/5 based on 1 reviews