Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Form Validation with JQuery

In this article we will discuss the validations of a webpage using JavaScript technique with the help of JQuery.

Introduction

There are many ways to use validation on webpages, as we can use it by PHP programming. And the PHP programming is very easy to use as validation on webpages. But we will learn the JavaScript technique on the webpages to check the validations.

I have two already created webpages that is sign-in and sign-up webpages, which I discussed with you in my previous articles. Let’s check the sign-in webpage as in a simple shape.

Listing 1: sign-in.html

<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
</head>
<body>
<form id="FormSignUp" novalidate="novalidate">
    <h2>User Information for Registration</h2>
    <div id="form-content">
        <fieldset>
            <div class="formfield">
                <label for="fname">First Name</label>
                <input type="text" name="fname">
            </div>
            <div class="formfield">
                <label for="lname">Last Name</label>
                <input type="text" name="lname">
            </div>
            <div class="formfield">
                <label for="email">Email</label>
                <input type="text" name="email">
            </div>
            <div class="formfield">
                <label for="pass">Password</label>
                <input type="password" name="pass">
            </div>
            <div class="formfield">
                <input type="submit" value="Register" class="submit">
            </div>
        </fieldset>
    </div>
</form>
</body>
</html> 

Description of sign-in.html webpage:

As you can see there is no anything about JavaScript. There are just simple tags of HTML and div’s ID. So for the validation in JavaScript we need to add some more thing this file for example, if the user input wrong thing in the email field so there should be a message just like that it should be red or under the box it should be show as a message. And if the user left some fields empty which are very important so there will be error message.

Output of Registration webpage

Figure 1: Output of Registration webpage

Now let’s we create another file that will be about CSS Style file. We can use the CSS styles as internal or inline styles but I want to use external file from which we will use link tag to link the external CSS Style file. See the listing 2 for details.

Listing 2: style.css

body {
    background-color: #33CCFF;
}
#content { background-color:#C8C8C8; width:500px; min-height:300px; padding:5px;  }

h2 {
    padding-left: 0px !important; text-align:center;
}

#FormSignUp {
    border: 1px solid #DFDCDC;
    border-radius: 10px 10px 10px 10px;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 300px;
    margin-top: 60px;
    padding: 25px 50px 10px;
    width: 500px;
}

#FormSignUp .formfield {
    display: inline-block;
    padding: 5px 8px;
    width: 340px;
}

#FormSignUp .formfield label {
    float: left;
    padding: 15px 0 0;
    text-align: right;
    width: 110px;
}
#FormSignUp .formfield input {
    float: right;
    margin: 10px 0;
    height: 25px;
}
#FormSignUp .submit {
    padding: 10px;
    width: 200px;
    height: 40px !important;
}
#FormSignUp .formfield label.error {
    color: #FB3A3A;
    display: inline-block;
    margin: 4px 0 5px 125px;
    padding: 0;
    text-align: left;
    width: 220px;
}
Output after applying CSS Style

Figure 2: Output after applying CSS Style

Now we will download the JQuery file "jquery.validate.min.js" by which we will apply the Validation on the form. You can download this file just copy its name and past it in the Google. You will see the link download it. Or you can download it under given link directly: http://jqueryvalidation.org/

When you download it. Then save it in the same directory where you saved your sign-up.html file. And then apply the Listing 3 inside the <head></head> tag. And also we are using Google apps plugin so if you want to download it or if you want to use it directly by the given link in Listing 3. And if you want to download it so use under given link directly: https://developers.google.com/speed/libraries/devguide

Listing 3: Link JQuery file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

Now we will use the internal functions of jquery.validate.min.js to apply Validation on the sign-in.html webpage. For details see carefully and study the codes of Listing 4.

Listing 4: Validation programming in JavaScript

<script type="text/javascript">
(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            $("#FormSignUp").validate({
                rules: {
                    fname: "required",
                    lname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    pass: {
                        required: true,
                        minlength: 10
                    },
                    agree: "required"
                },
                messages: {
                    fname: "Please enter your correct firstname",
                    lname: "Please enter your correct lastname",
                    pass: {
                        required: "Please provide a correct password",
                        minlength: "Your password must be at least 10 characters in length"
                    },
                    email: "Please enter a valid email address",
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
</script>
Output without Entering data and pressing Register Button showing important fields error

Figure 3: Output without Entering data and pressing Register Button showing important fields error

Description of Validation:

As you can see the Figure 1 to 3, and the Listings 1 to 4. We developed a webpage and applied the JavaScript validation with the help of JQuery. In the Listing 1 we just used the HTML tags to create a form. We used the form tag to create from, fieldset to use the label for the fields, and div tag to create div and use the class. And then we use the CSS styles on these tags and also we used the id and class names to apply CSS styles on them. After applying the CSS style we used link tag in the head tag to link the external CSS Style file. As you can see the effect in Figure 2.

After these all things we did the most important thing of this article which was applying of validation technique on it. So for validation we first of all download the JQuery’s validation file and then used the functions of “jquery.min.js” and "jquery.validate.min.js" files on the sign-in.html. As you can see the how we linked these two files in Listing 3. When we downloaded them then we used JavaScript programming to apply the validations on the form fields. For applying the validation on the form fields we used the form id name, class name and the field’s name. Then we fixed the rules what should be happen if there is any field is empty. As you can see it in the Figure 3. For the full file source code see the Listing 5 and study it carefully you will understand it easy.

Listing 5: Source Code of sign-in.html

<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
<link rel="stylesheet" type="text/css" href="style4.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            $("#FormSignUp").validate({
                rules: {
                    fname: "required",
                    lname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    pass: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },
                messages: {
                    fname: "Please enter your firstname",
                    lname: "Please enter your lastname",
                    pass: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    email: "Please enter a valid email address",
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
</script>
</head>
<body>
<form id="FormSignUp" novalidate="novalidate">
    <h2>User Information for Registration</h2>
    <div id="content">
        <fieldset>
            <div class="formfield">
                <label for="fname">First Name</label>
                <input type="text" name="fname">
            </div>
            <div class="formfield">
                <label for="lname">Last Name</label>
                <input type="text" name="lname">
            </div>
            <div class="formfield">
                <label for="email">Email</label>
                <input type="text" name="email">
            </div>
            <div class="formfield">
                <label for="pass">Password</label>
                <input type="password" name="pass">
            </div>
            <div class="formfield">
                <input type="submit" value="Register" class="submit">
            </div>
        </fieldset>
    </div>
</form>
</body>
</html>

NOTE: We didn’t used the two most important things in the form tag that is action and method due the topic of this article, which JavaScript form validation. The action is used to take the directory of file to which we use method send or transfer the data.

Conclusion:

In this article we discussed the JavaScript validation with the help of JQuery, in a simplest way. I hope you will understand the validation using JavaScript Technique after reading this article. If you have any query related to this article, do a comment please.



Studing Computer Science and have knowledge in C/C++, Java, VB.net, C#, Assembly Programming, MFC, HTML, XML, JAVASCRIPT, AJAX, JQUERY, PHP, MYSQL, ORACLE

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login