Skip to content

WebNinjaDeveloper.com

Programming Tutorials




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

jQuery Validate Plugin Advanced Registration Form Validation With Error Messages in Bootstrap 4 Using Javascript

Posted on November 3, 2022

 

 

Welcome folks today in this blog post we will be validating the html5 form using the jquery validate plugin in browser using jquery in bootstrap 4 using javascript. All the full source code of the application is 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 jquery validate plugin library cdn as shown below. And also we need to include the bootstrap 4 cdn and jquery cdn as well.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        .error {
            margin-top: 10px;
            color: red
        }
    </style>
</head>
<body>
  
    <!-- Including app.js jQuery Script -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script src="app.js"></script>
</body>
</html>

 

 

As you can see we have included all the libraries cdn which include the jquery validate , bootstrap and jquery.

 

 

Adding the HTML5 Form Fields

 

 

Now we will be adding the different html5 form fields to build the registration form. This include the different fields such as username , email, password & confirm password fields and a submit button.

 

 

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
<br>
    <p class="text-center">
        Form Validation Using jQuery
    </p>
    <div class="container">
        <div class="col-lg-8
m-auto d-block">
            <form autocomplete="off" id="form">
                <div class="form-group">
                    <label for="user">
                        Username:
                    </label>
                    <input type="text" minlength="5" required name="username" id="username" class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="email">
                        Email:
                    </label>
                    <input type="email" minlength="5" required name="email" id="email" class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="password">
                        Password:
                    </label>
                    <input required type="password" minlength="5" maxlength="20" name="password" id="password"
                        class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="conpassword">
                        Confirm Password:
                    </label>
                    <input required type="password" name="conpassword" id="conpassword" class="form-control">
                </div>
 
                <input type="submit" id="submitbtn" value="Submit" class="btn btn-primary">
            </form>
        </div>
    </div>

 

 

As you can see we are attaching the bootstrap 4 form fields using the bootstrap 4 classes. And also we have different form fields. And also we are attaching the form fields.

 

 

 

 

 

Initializing the jQuery Form Validate Plugin

 

 

Now we will be initializing the jquery Form Validate Plugin to validate the html5 form fields. We have included the jquery cdn and also the library of jquery validate cdn.

 

 

JavaScript
1
2
3
4
5
6
7
8
$("#form").validate({
    rules:{
        // define the form validation rules
    },
    messages:{
       // define the form validation messages
    }
})

 

 

As you can see we are first of all getting the reference of the form using it’s id and then we are invoking the method of validate() and we are passing the object which contains the options which include the rules and messages of this form validation. Rules is basically an object which declares the various conditions for the html5 form fields. And then messages is also an object which define the different error messages for different html5 form fields.

 

 

Attaching the Validations to HTML5 Form Fields

 

 

Username Validation

 

 

Now first of all we will be attaching the validation rules and displaying the error messages for the username input field as shown below

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#form").validate({
    rules:{
        username:{
            required:true,
            minlength:5
        }
    messages:{
        username:{
            required:"Please enter the username",
            minlength:"Username must be at least 5 characters"
        }
    }
})

 

 

As you can see we are attaching the required property and minLength property to the username input fields. Require simply means you need to write this value and minLength simply means you need to write at least 5 characters in this case. It takes the numeric value. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of username.

 

 

 

 

 

 

Email Validation

 

 

Now first of all we will be attaching the validation rules and displaying the error messages for the email input field as shown below

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#form").validate({
    rules:{
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        email:{
            required:"Please enter the email",
            email:"Please enter a valid email"
        }
    }
})

 

 

As you can see we are attaching the required property and email property to the email input fields. Require simply means you need to write this value and email property simply means you need to write a valid email. It takes the boolean value. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of email.

 

 

 

 

 

 

Password & Confirm Password Validation

 

 

Now first of all we will be attaching the validation rules and displaying the error messages for the password and confirm password input fields 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
$("#form").validate({
    rules:{
        password:{
            required:true,
            minlength:5
        },
        conpassword:{
            required:true,
            minlength:5,
            equalTo:"#password"
        }
    },
    messages:{
        password:{
            required:"Please enter the password",
            minlength:"Password must be at least 5 characters"
        },
        conpassword:{
            required:"Please enter the password",
            minlength:"Password must be at least 5 characters",
            equalTo:"Your password's don't match with each other"
        }
    }
})

 

 

As you can see we are attaching the required property and minLength & equalTo property to the password and confirm password input fields. Require simply means you need to write this value and minLength property simply means you need to write atleast 5 characters for the password and confirm password and equalTo is only attached to confirm password field which simply means that password and confirm password doesn’t match with each other. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of password and confirm password fields.

 

 

 

 

 

 

 

Full Source Code

 

 

Now wrapping this post this is the full source code of the index.html file (along with javascript code) as shown below

 

 

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        .error {
            margin-top: 10px;
            color: red
        }
    </style>
</head>
 
<body><br>
    <p class="text-center">
        Form Validation Using jQuery
    </p>
    <div class="container">
        <div class="col-lg-8
m-auto d-block">
            <form autocomplete="off" id="form">
                <div class="form-group">
                    <label for="user">
                        Username:
                    </label>
                    <input type="text" minlength="5" required name="username" id="username" class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="email">
                        Email:
                    </label>
                    <input type="email" minlength="5" required name="email" id="email" class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="password">
                        Password:
                    </label>
                    <input required type="password" minlength="5" maxlength="20" name="password" id="password"
                        class="form-control">
                </div>
 
                <div class="form-group">
                    <label for="conpassword">
                        Confirm Password:
                    </label>
                    <input required type="password" name="conpassword" id="conpassword" class="form-control">
                </div>
 
                <input type="submit" id="submitbtn" value="Submit" class="btn btn-primary">
            </form>
        </div>
    </div>
 
    <!-- Including app.js jQuery Script -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script>
        $("#form").validate({
    rules:{
        username:{
            required:true,
            minlength:5
        },
        email:{
            required:true,
            email:true
        },
        password:{
            required:true,
            minlength:5
        },
        conpassword:{
            required:true,
            minlength:5,
            equalTo:"#password"
        }
    },
    messages:{
        username:{
            required:"Please enter the username",
            minlength:"Username must be at least 5 characters"
        },
        email:{
            required:"Please enter the email",
            email:"Please enter a valid email"
        },
        password:{
            required:"Please enter the password",
            minlength:"Password must be at least 5 characters"
        },
        conpassword:{
            required:"Please enter the password",
            minlength:"Password must be at least 5 characters",
            equalTo:"Your password's don't match with each other"
        }
    }
})
    </script>
</body>
 
</html>

Recent Posts

  • Javascript PDFObject Library Example to Render PDF Document From URL or From Local PC in Browser
  • Node.js Express Project to Extract Text From Word (.DOCX) File & Save it as Text File in Browser
  • Node.js Tutorial to Parse & Extract Text & Tables From PDF Document Using pdfreader Library in Javascript
  • Node.js Express Project to Stream Local MP4 Video in Webpage Using Fetch API in Javascript
  • Node.js Express Tutorial to Read & Write Stream of Data From Buffer to Server Using Pipes in Browser
  • 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