Bootstrap form validation example with demo using validator.js plugin
In this post we will give you information about Bootstrap form validation example with demo using validator.js plugin. Hear we will give you detail about Bootstrap form validation example with demo using validator.js pluginAnd how to use it also give you demo for it if it is necessary.
We always need to add validation on form like registration form, contact form, login form etc. we always prefer to give validation error after page refresh but you can give validation without page refresh. If you use bootstrap then you can use easily validator.js plugin.
validator.js plugin gives client side validation without page refresh. We can use simply. validator.js plugin we can add validation in our PHP project, or any framework like laravel framework, codeigniter framework, symphony framework etc.
In this example i give you how can you give validation for require field, email, minlength etc. you just have to add attribute for validation and it is very customize, you can also set your custom error message using attribute.
So, let’s run bellow example or you can check demo. you will find bellow output.
Preview:
Example:
<html lang="en">
<head>
<title>
Bootstrap Validation example using validator.js
</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js">
</script>
</head>
<body>
<br/>
<div >
<div style="width:750px;margin:0px auto">
<div >Bootstrap Validation example using validator.js</div>
<div >
<form data-toggle="validator" role="form">
<div >
<label for="inputName">Name</label>
<input data-error="Please enter name field." id="inputName" placeholder="Name" type="text" required />
<div ></div>
</div>
<div >
<label for="inputEmail" >Email</label>
<input type="email" id="inputEmail" placeholder="Email" required>
<div ></div>
</div>
<div >
<label for="inputPassword" >Password</label>
<div >
<input type="password" data-minlength="5" id="inputPassword" data-error="must enter minimum of 5 characters" placeholder="Password" required>
<div ></div>
</div>
</div>
<div >
<label for="inputName">BIO</label>
<textarea data-error="Please enter BIO field." id="inputName" placeholder="Cina Saffary" required=""></textarea>
<div ></div>
</div>
<div >
<button type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You can get more information about plugin from here : validator.js.
Hope this code and post will helped you for implement Bootstrap form validation example with demo using validator.js plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs