Parsley.js Registration Form Validation Example With Error Messages in Bootstrap 4 & JS

 

 

Welcome folks today in this blog post we will be looking on parsley.js form validation example in bootstrap 4 and javascript. All the source code of the example will be shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

First of all we need to include the parsely.js cdn library for both javascript and css. And also we need to include the bootstrap 4 libraries for the css as shown below

 

 

 

 

After including the required libraries cdn we need to add the html5 registration form where we will be having the different input fields that we need to validate using the parsley.js library as shown below

 

 

 

 

As you can see guys we have defined the different headings for displaying the status of the validation or error messages that are there inside the form. And after that we have the actual form here for input fields we are using the bootstrap classes to style the input fields. And we have the username, email and textarea fields where the user will write the comment and then also we have the radio button also. And lastly we have the submit button to submit the form.

 

 

 

 

Adding the Parsley Attributes inside Form & Input Fields

 

 

Now guys we will now be adding the different attributes required of parsley.js library so that it can function properly. For that first of all we need to attach to the parent form element

 

 

 

 

As you can see we are attaching a custom attribute to the form tag which allows the parsley.js library to load inside the form when we write the javascript code before that we need to attach this attribute to do the form validation of the input fields.

 

 

Now guys we need to add the custom parsley.js attributes for different form validations of minLength and required. And we can even define custom messages with the help of these attributes as shown below

 

 

 

 

As you can see we are attaching the keyup event from the parsley.js event list and also we are attaching the minLength and maxLength attributes and then we are adding the message if the comment character count is less than 20 then we are showing the error message and also we have provided the threshold value after which the error message will be showing inside the browser.

 

 

Initializing the Parsley.js Library to HTML5 Form in Javascript

 

 

Now lastly guys inside the javascript code we will be attaching the parsley.js form validation to the html5 form. For the connection we will be first of all target the form using it’s id and then calling the parsley() method of the library and then calling the on() method and with the help of this method we can listen for various events in the form which is submit event it triggers everytime when the user try to submit the form after entering all the values here we are auto preventing the form from submitting and returning false. And then also we are attaching the field:validated event which is there specifically for different input fields validation. Inside that we are checking for the error if the user decides to left the field empty then we will be showing the error class.

 

 

 

Full Source Code

 

 

Wrapping the blog post this is the full source code of the index.html file (along with javascript code)

 

 

 

index.html