What is JQUERY? Illustrate the use of JQUERY for form validation

42views

written 7.8 years ago by

• modified 7.8 years ago

JQUERY

JQuery is a light, “write less, do more”, Javascript library.
The purpose of JQuery is to make it much easier to use JavaScript on your website. It simplifies HTML document traversing, event handling, animating and AJAX interactions for rapid web development.

The jQuery library is a single JavaScript file, and you reference it with the HTML

<script> tag (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: \$(selector).action()

A \$ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:
\$(this).hide() - hides the current element.
\$("p").hide() - hides all
elements.
\$(".test").hide() - hides all elements with class="test".
\$("#test").hide() - hides the element with id="test".

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: \$().

The element Selector

The jQuery element selector selects elements based on the element name. • You can select all
elements on a page like this: \$("p")
Example: When a user clicks on a button, all
elements will be hidden:

Example

\$(document).ready(function(){
\$("button").click(function(){
$("p").hide();
            });
        }); 

**The #id Selector**

- The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
- An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
- To find an element with a specific id, write a hash character, followed by the id of the HTML element:\$("#test") 
- Example: When a user clicks on a button, the element with id="test" will be hidden:
- Example

        \$(document).ready(function(){
        \$("button").click(function(){
        \$("#test").hide();
            });
        }); 

**The .class Selector**

- The jQuery class selector finds elements with a specific class.
- To find elements with a specific class, write a period character, followed by the name of the class:$(".test")

Example: When a user clicks on a button, the elements with class="test" will be hidden:

Example

\$(document).ready(function(){
\$("button").click(function(){
\$(".test").hide();
    });
});

JQuery for Form Validation:

Step 1 – Include the latest version of the jQuery Library.

//hosted by Microsoft Ajax CDN

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 2 – Download the jQuery Validation Plugin.

Step 3 – Add the following JavaScript validation rules to your webpage (or include as separate js include).

The code below contains the input field validation rules for the form and also includes a direct submit handler (works for mutiple forms on same page).

(function($,W,D)
    {
    var JQUERY4U = {};
    
        JQUERY4U.UTIL =
        {
    setupFormValidation: function()
            {
                //form validation rules
                $("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
                    },
password: {
required: true,
minlength: 5
                    },
agree: "required"
                },
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
                    },
email: "Please enter a valid email address",
agree: "Please accept our policy"
                },
submitHandler: function(form) {
form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

Step 4 – Add the HTML for the form and some styles.

The input fields “name” attribute is important as it maps directly to the validation rules.

<!-- HTML form for validation demo -->
<form action="" method="post" id="register-form" novalidate="novalidate">

<h2>User Registration</h2>

<div id="form-content">
<fieldset>

<div class="fieldgroup">
<label for="firstname">First Name</label>
<input type="text" name="firstname"/>
</div>

<div class="fieldgroup">
<label for="lastname">Last Name</label>
<input type="text" name="lastname"/>
</div>

<div class="fieldgroup">
<label for="email">Email</label>
<input type="text" name="email"/>
</div>

<div class="fieldgroup">
<label for="password">Password</label>
<input type="password" name="password"/>
</div>

<div class="fieldgroup">
<p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
<input type="submit" value="Register" class="submit"/>
</div>

</fieldset>
</div>

<div class="fieldgroup">
<p>Already registered? <a href="/login">Sign in</a>.</p>
</div>
</form>
/* example styles for validation form demo */
#register-form {
background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;
border: 1px solid #DFDCDC;
border-radius: 15px 15px 15px 15px;
display: inline-block;
margin-bottom: 30px;
margin-left: 20px;
margin-top: 10px;
padding: 25px 50px 10px;
width: 350px;
}

#register-form .fieldgroup {
background: url("form-divider.gif") repeat-x scroll left top transparent;
display: inline-block;
padding: 8px 10px;
width: 340px;
}

#register-form .fieldgroup label {
float: left;
padding: 15px 0 0;
text-align: right;
width: 110px;
}

#register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {
float: right;
margin: 10px 0;
height: 25px;
}

#register-form .submit {
padding: 10px;
width: 220px;
height: 40px !important;
}
#register-form .fieldgroup label.error {
color: #FB3A3A;
display: inline-block;
margin: 4px 0 5px 125px;
padding: 0;
text-align: left;
width: 220px;
}

ADD COMMENT EDIT