Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 3, 2022

 

 

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>

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme