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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parsley Form Validation Example in Javascript</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/doc/assets/docs.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/src/parsley.css"> </head> <body> </body> <script src="//code.jquery.com/jquery-2.1.3.js"></script> <script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script> </html> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="bs-callout bs-callout-warning hidden"> <h4>Oh snap!</h4> <p>This form seems to be invalid :(</p> </div> <div class="bs-callout bs-callout-info hidden"> <h4>Yay!</h4> <p>Everything seems to be ok :)</p> </div> <form id="demo-form"> <label for="fullname">Full Name * :</label> <input type="text" class="form-control" required=""> <label for="email">Email * :</label> <input type="email" class="form-control" required=""> <label for="contactMethod">Preferred Contact Method *:</label> <p> Email: <input type="radio" name="contactMethod" value="Email" required=""> Phone: <input type="radio" name="contactMethod" value="Phone"> </p> <p> <label for="message">Message (20 chars min, 100 max) :</label> <textarea id="message" class="form-control"></textarea> </p> <br> <input type="submit" class="btn btn-default" value="validate"> </form> |
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
1 2 3 |
<form id="demo-form" data-parsley-validate=""> </form> |
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
1 2 3 4 |
<textarea id="message" class="form-control" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parsley Form Validation Example in Javascript</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/doc/assets/docs.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/src/parsley.css"> </head> <body> <div class="bs-callout bs-callout-warning hidden"> <h4>Oh snap!</h4> <p>This form seems to be invalid :(</p> </div> <div class="bs-callout bs-callout-info hidden"> <h4>Yay!</h4> <p>Everything seems to be ok :)</p> </div> <form id="demo-form" data-parsley-validate=""> <label for="fullname">Full Name * :</label> <input type="text" class="form-control" required=""> <label for="email">Email * :</label> <input type="email" class="form-control" required=""> <label for="contactMethod">Preferred Contact Method *:</label> <p> Email: <input type="radio" name="contactMethod" value="Email" required=""> Phone: <input type="radio" name="contactMethod" value="Phone"> </p> <p> <label for="message">Message (20 chars min, 100 max) :</label> <textarea id="message" class="form-control" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea> </p> <br> <input type="submit" class="btn btn-default" value="validate"> </form> </body> <script src="//code.jquery.com/jquery-2.1.3.js"></script> <script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script> <script> $(function () { $('#demo-form').parsley().on('field:validated', function () { var ok = $('.parsley-error').length === 0; $('.bs-callout-info').toggleClass('hidden', !ok); $('.bs-callout-warning').toggleClass('hidden', ok); }) .on('form:submit', function () { return false; // Don't submit form for this demo }); }); </script> </html> |