Form Validations in jQuery

Why jQuery is easy?

A single line of jQuery to select the form and apply the validation plugin. And a bit of metadata on each element to specify the validation rules.

Prerequisite:-

To use jQuery either download the javascript and jQuery files: (jquery-latest.js and jquery.validate.js)      or

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>
</script>
</head>

Microsoft CDN:

<head>
<script src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”>
</script>
</head>

One big advantage of using the hosted jQuery from Google or Microsoft:

Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

Lets have an example of Form Validation on Numbers:

<html>
<head>

<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<!--<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>-->

<script>
$(document).ready(function(){
$("#myform").validate();});
</script>

<style>
input{
    font-size: 20pt;
    border: 1px solid rgba(81, 203, 238, 1);
    padding: 2px; 
    margin-bottom: .5em;  
}
input[type=text]:focus, textarea:focus {
  box-shadow: #51CBEE 0 0 3px;
  border: 1px solid rgba(81, 203, 238, 1);
}
input.error {
border: 1px solid red;
 }
label.error {
    padding-left: 16px;
    margin-left: .3em;
    class:red;
          }
</style>
</head>
<body> 
<form id="myform"><h1> Form Validation On Numbers</h1> 
<label for="rccItem0">Enter a Number: </label>  
<input type=text id="rccItem0" class=required  minlength=3 name="rccItem0" />
  <br/>  <input type="submit" value="Validate!" />
</form>
</body>
</html>

rr4The key here is the the input field for the name has “minlength” and “required”. This will either trigger an empty name or give you the message if the length of characters is smaller than 4.

rr5

 

bjhjh

hghvghvgvgvhg

Advertisements

About Priyanka Kapoor

Simple, Hardworking & friendly.....
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s