In most websites, we need to collect user details and or other types of information by using forms and we are required to have form validations to make sure user input is correct and useful. This can be done easily by using Parsley.js with the Bootstrap Framework.
Typical Validation Tasks Are:
- Has the user filled in all required fields?
- Has the user entered a valid date?
- Has the user entered text in a numeric field?
Most Often, The Purpose Of Form Validation Is To Ensure Correct User Input
Parsley.js
Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.
Javascript form validation is not necessary, and if used, it does not replace strong backend server validation.
Bootstrap
Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
How To Use Parsley.js With Bootstrap Framework
Parsley.js uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Parsley’s default DOM API is data-parsley-. That means that if in the config you see a foo property, it can be set/modified via DOM with data-parsley- foo=”value”.
St. Louis Marketing Agency Offering Website Development
We would like to show our validation style like bootstrap native error/success message below:
Installation
1. Download Parsley
Parsley relies on jQuery (>= 1.8), and it will need to be included before including Parsley. You will also need to include es5-shim if you want to support IE8.
Then, you can either use parsley.js, unminified file, or parsley.min.js minified file. Please download parsley.js from this link.
2. Include Parsley js in HTML form.
Include the Parsley js with jquery.js in the footer before closing the body tag.
< script src=”path-to- jquery-js”></script >
< script src=”path-to- parsley-js”></script >
3. HTML Form
Create Your form with required fields
< form id=””demo-form”” >
< div class=””form-group”” >
< label for=””fullname”” >Full Name * :< /label >
< input class=””form-control”” name=””fullname”” required=”” type=””text”” / >< /div >
< div class=””form-group”” >< label for=””email”” >Email * :< /label >
< input class=””form-control”” name=””email”” required=”” type=””email”” / >< /div >
< div class=””form-group”” >< label for=””password”” >Password * :< /label >
< input class=””form-control”” name=””password”” required=”” type=””password”” / >< /div >
< input class=””btn” type=””submit”” value=””submit”” / >
< /form >
4. Initialise Parsley js
Normally to initialize Parlsey we need to write this after including parsley.js.
< script > $(‘#demo-form’).parsley(); < /script >
Complete Code
< form id=””demo-form”” >
< div class=””form-group”” >
< label for=””fullname”” >Full Name * :< /label>
< input class=””form-control”” name=””fullname”” required=”” type=””text”” / >< /div >
< div class=””form-group”” >< label for=””email””> Email * :< /label >
< input class=””form-control”” name=””email”” required=”” type=””email”” />< /div >
< div class=””form-group”” >< label for=””password”” >Password * :< /label >
< input class=””form-control”” name=””password”” required=”” type=””password”” / ></div > < input class=””btn” type=””submit”” value=””submit”” / >
< /form>
< script > $(‘#demo-form’).parsley(); </script >
To implement Parsley js with Bootstrap Framework we need to do some changes in initializing
< script> $(document).ready(function() { $(‘#demo-form’).parsley({ trigger: ‘change’, successClass: “has-success”, errorClass: “has-error”, classHandler: function (el) { return el.$element.closest(‘.form-group’); }, errorsWrapper: ‘
< p class=”help-block help-block-error” >
< p>’,
errorTemplate: ‘’,
});
});
< /script >
The Complete Code With Changes
< form id=””demo-form”” >
< div class=””form-group”” >
< label for=””fullname””>Full Name * :< /label >
< input class=””form-control”” name=””fullname”” required=”” type=””text”” />< /div >
< div class=””form-group”” >< label for=””email””>Email * :< /label >
< input class=””form-control”” name=””email”” required=”” type=””email”” />< /div >
< div class=””form-group”” >< label for=””password””>Password * :</label >
< input class=””form-control”” name=””password”” required=”” type=””password”” />< /div >
< input class=””btn” type=””submit”” value=””submit”” / >
< /form >< script src=”path-to-jquery-js” >< /script >
< script src=”path-to-parsley-js” >< /script >
< script > $(document).ready(function() {
$(‘#idemo-form’).parsley({
trigger: ‘change’,
successClass: “has-success”,
errorClass: “has-error”,
classHandler: function (el) {
return el.$element.closest(‘.form-group’);
},
errorsWrapper: ‘</p > < p class=”help-block help-block-error” >
< p >’,
errorTemplate: ‘’,
});
}); < /script >
Conclusion
I have found that Parsley is a great library for form validation with easy application and isn’t time-consuming either. You don’t need much javascript/jquery knowledge either. This makes it easy to use Parsley with the Bootstrap framework. For more information, you can read parsley some documentation here: https://parsleyjs.org/doc/index.html
