Validate Number Field

Hello friends, here we are going to discuss how to validate Phone number field. In this case we have two constraints, one is the phone number field should not exceed the length of 10 or whatever your requirement is. And the second constraint is this field should contain only numerical value.

Following we are having a field named Mobile number. On submission it must fulfill both the described constraints.

Mobile No.

ShowCode/HideCode

$(document).ready(function(){
var num,Patt;
$("#Submit").click(function(){
num=$("#number").val();
num=$.trim(num);
if(num=="")
{
alert('Enter Mobile Number');
$("#number").focus();
}
Patt=/[0-9]+$/;
if(!Patt.test(num))
{
alert('Only Numbers between 0-9 are allowed');
}
len=num.length;
if(len>10)
{
alert('Length should not be more than 10 characters')
}
});
$("#Cancel").click(function(){
$("#number").val("");
$("#number").focus();
});
});

Email Validation In jQuery

In this article we are going to discuss about email validation. This is one of the most common queries people use to do how to do email validation that is, whether the entered email is correct or not. Any email id entered should adhere to few rules and we will test same.

Following is the logging form named login.html. Try it out.

Email Id
Password

ShowCode/HideCode

$(document).ready(function(){
var UserId,Pwd,EmailPattern;
$("#btnSubmit").click(function(){
UserId=$("#email").val();
UserId=$.trim(UserId);
if(UserId=="")
{
alert('Enter User Name');
$("#email").focus();
}
EmailPattern=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(!EmailPattern.test(UserId))
{
alert('Please Enter a Valid Email Address');
$("#email").val("");
$("#email").focus();
}
else{
alert('Correct Email Address');
}
Pwd=$("#password").val();
Pwd=$.trim(Pwd);
if(Pwd=="")
{
alert('Enter Password');
if(UserId!="")
$("#password").focus();
}
});
$("#btnCancel").click(function(){
$("#email").val("");
$("#email").focus();
$("#password").val("");
});
});

Required Field Validation in jQuery

I have told before also that with jQuery we can do all those tasks that we use to do using javascript. Most of the time we need to validate different fields for particular set of input like email validation, passwords, username etc.

All the fields have different set of inputs but needs to be validated for correct set of input. We prefer doing this on client side instead at server side. So, for doing so at client side we have javascript and now jQuery.

Here in this article we will discuss required field validation using jQuery That is, we will validate those fields where some input is necessary like username, password, email address, Ph No etc. We are taking a simple example of user login where we have two fields username and password and both the fields are necessary to be filled before doing submission. As soon as user clicks Submit button the fields will be validated for some input.

Following is the logging form named login.html. Try it out.

Username
Password

ShowCode/HideCode

$(document).ready(function(){
var UserId,Pwd;
$("#btnSubmit").click(function(){
UserId=$("#username").val();
UserId=$.trim(UserId);
if(UserId=="")
{
alert('Enter User Name');
$("#username").focus();
}
Pwd=$("#password").val();
Pwd=$.trim(Pwd);
if(Pwd=="")
{
alert('Enter Password');
if(UserId!="")
$("#password").focus();
}
});
$("#btnCancel").click(function(){
$("#username").val("");
$("#password").val("");
$("#username").focus();
});
});

jQuery animate() method

Animate() is one of the most powerful method in jQuery library used for applying simple animation and effects. It is used to perform custom animation on a set of CSS properties of a object. Animate() is able to animate only numeric values like margin:10px but it can't animate any string value like background-color: red.

We use "+=" or "-=" for relative animations.

For example:



ShowCode/HideCode

$(document).ready(function(){
$("#btn1").click(function(){
$("#image1").animate({width:"500px",height:"500px", borderWidth:"5px"},1000);
});
});

Another Example using Animate() method:

Hello

ShowCode/HideCode

$(document).ready(function(){
$("#btn2").click(function(){
$("#div1").animate({width:'250px',height:'150px', opacity:'0.3', fontSize:'5em', left:'200px'},"slow");
});
});

jQuery stop() method

If you want to stop the running animation at once in between only then you can use the stop() function of jQuery. Notice Stop, StopAll and Stop And Finish to know how the stop method works with different parameters. For example:-



ShowCode/HideCode

$(document).ready(function(){
$("#btnStop").click(function(){
$("#image2").stop();
});
$("#btnStopAll").click(function(){
$("#image2").stop(true);
});
$("#btnStopFinish").click(function(){
$("#image2").stop(true,true);
});
$("#btnStart").click(function(){
$("#image2").animate({width:'300px'},3000);
$("#image2").animate({height:'300px'},3000);
});

Stop() method with no parameters stops the immediate running animation and executes the very next animation instruction waiting in the queue. Stop() method can have one or two parameters also i.e. stop(StopAll, gotoend). Both are optional.

When stop executed with single parameter that is the first one it stops the current animation and removes all other animation instruction from the queue. If executed with both parameters then it finishes off the current animation immediately and stops.

jQuery SlideUp() SlideDown() Animation Methods

After discussing about show, hide and toggle function we will be discussing about next few very simple methods used for animating text or object on a webpage are slideUp, slideDown and slideToggle.

ShowCode/HideCode

$(document).ready(function(){
$("#btnSlideUp").click(function(){
$("#SlideDiv").slideUp(3000);
});
$("#btnSlideDown").click(function(){
$("#SlideDiv").slideDown(3000);
});
$("#btnSlideToggle").click(function(){
$("#SlideDiv").slideToggle(3000);
});

jQuery Show() Hide() Animation Methods

Here in this articles we will be discussing next two very important jQuery animation methods and that are show(), hide() and toggle() works. Check the examples explained below:

ShowCode/HideCode $(document).ready(function(){ $("#btnshow").click(function(){ $("#image1").show(); }); $("#btnhide").click(function(){ $("#image1").hide(); }); $("#btntoggle").click(function(){ $("#image1").toggle(); });

jQuery FadeIn() FadeOut()

Here we will again discuss different animation and effect methods but with few simple examples to explain their proper use. If you want to get its code click show code and copy and paste it directly to check in your program.

As a very first methods we will discuss fadeIn(), fadeOut() and fadeToggle() methods. See the example given below:

Hello this is Sample text for testing jquery effects and animation methods.

ShowCode/HideCode

$(document).ready(function(){
$("#FadeOut").click(function(){
$("#seconddiv").fadeOut(3000,"swing");
});
$("#FadeIn").click(function(){
$("#seconddiv").fadeIn(3000);
});
$("#FadeToggle").click(function(){
$("#seconddiv").fadeToggle(3000);
});
});

Animation using jQuery

Web designing is everything about how you decorate your web page, text different objects on the page etc. For decorating text and objects we use certain effects and animation methods using which we are able to move the objects, show or hide it, Fade in or fade out of text or objects etc.

Earlier for doing any these tasks we used javascript or flash. We know by using flash on any websites its loading time increases drastically. So, to avoid it we used javascript but it includes lots of code and that too very tough to understand.

But here, in jQuery for all such types of tasks some very easy to use functions are made that you can use directly and can design your web page with desired animation and effects with just very little code.

For example:- If you you want any text to fade out on mouseover and fade in on mouseout then, you can do it very easily by adding following code to your website:-

<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").fadeOut(2000);
      });
$("p").mouseleave(function(){
    $("p").fadeIn(2000);
      });
});
</script>

Similarly, there is a fadeToggle() function that toggles between fadein and fadeout. That means, if you use toggle on a <p> element then if its fadein it will fadeout it and if its fadeout then it will fadein it.

Following is the list of different animation and effects method used in jQuery.

fadeIn(): -This fades in the selected element. Syntax: $(selector).fadeIn(speed, easing,callback). Speed sould be slow, fast or in milliseconds. Easing parameter has two possible values that is swing, linear and callback is a function that you would like to call after fadeIn() function is completed. All the three parameters are optional. For example:- $("p").fadeIn(); 

fadeOut(): -This fades out the selected item. Syntax: $(selector).fadeOut(speed,easing,callback) same as of fadeIn(). For example:- $("p").fadeOut();

fadeToggle(): - This toggles between fadeIn and fadeOut method.
 
fadeTo(): - This could fadeIn/fadeOut to a given opacity. Its value can range in between 0.0 to 1.0. Syntax: $(selector).fadeTo(speed,opacity,easing,callback) where speed and opacity are required parameter.

hide():-This hides the selected item. Syntax: $(selector).hide(speed,easing,callback)

show(): - This shows the selected item. It won't work if the visibility property is set to hidden. Syntax: $(selector).show(speed,easing,callback)

toggle(): - Toggles between hide and show method. Syntax: $(selector).toggle(speed,easing,callback)

slideUp(): - This slides-up or say hide the selected item. Syntax: $(selector).slideUp(speed,easing,callback)

slideDown(): - This slides down the selected item. Syntax: $(selector).slideDown(speed,easing,callback)

slideToggle(): - This toggles between slide up and slide down function. Syntax: $(selector).slideToggle(speed,easing,callback)

stop(): - This stops all the currently running animation. Syntax: $(selector).stop(stopAll, gotoEnd). Both the parameter takes boolean valuse that is true or false.

queue(): -Displays the length of the queue that is, shows the number of functions in a queue to be executed on the selected item. Syntax: $(selector).queue(queuename).

dequeue(): - Removes the next function from the queue and executes the next one.


finish(): - This stops, removes and completes all queued functions of the selected item. Synatx: $(selector).finish(queuename);

delay(): - This helps to set a delay on all the queued functions for the selected element. Syntax:$(selector).delay(speed,queuename)

clearQueue(): - It helps to remove all the remaining queued functions of the selected element. Synatx: $(selector).clearQueue(queuename)

animate(): - This runs a custom animation on the selected element. Synatx: $(selector).animate({styles},speed,easing,callback). Only style paratmeter is required, all others are optional. Styles like height, width, margin, top, left, fontsize etc.

jQuery Selectors

As i told before, jQuery library contains many features that can manipulate HTML/DOM elements, CSS manipulation etc. Here we are going to discuss different selectors using which we can easily select and manipulate HTML elements.

Each jQuery selector uses id, classes, name, attribute, attribute value, types and much more things to find HTML elements. Each selector starts with $ sign followed by parenthesis.

How to select a HTML element using Tag name:
Here we will select all the elements having tag name div. For example:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").css("background-color","red");
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>Hello</p>
<div>This text is in div.</div>
<p>This text is in paragraph tag.</p>
<div>This is another div.</div>
<button>Click me</button>
</body>
</html>

Now, we will select elements with their id. For this we use "#" symbol. For example select element whose id is select.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#select").hide();
  });
});
</script>
</head>
<body>
<h2>Hello World</h2>
<p>This is a paragraph.</p>
<p id="select">This is another paragraph with id select.</p>
<button>Click me</button>
</body>
</html>

If we want to select an element using class then we use the '.' operator followed by the class name to do so. For example:

<!DOCTYPE html>
<html> <head> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function(){
$(".big").hide();
});
});
</script>
</head>
<body>
<div class="big">
<p class="para1">This is first paragraph in div with class big.</p>
<p>This is second paragraph.</p>
</div>
<br />
<div class="medium" id="divid3">
<p>This is a para inside second division</p>
</div>
</body>
</html>

Other different selectors used to manipulate HTML/DOM elements are listed below.

$("*"):- This selector is used to select all elements. If used together with another element it selects all its child elements. For example: 
$(document).ready(function(){
  $("ul *").css("background-color","yellow");
});

$(":first"):- It is used together with an element and selects the first instance of the used element. For example: $("p:first").hide(); This will hide the first paragraph of the body.

$(":last"):- It works just opposite of :first. It selects the last element. For example: $("p:last").hide(); This will hide the last paragraph of the body.

$(":even"):-Selects all even child elements. For example: $("tr:even") it selects all even tr elements of a table.

$(":odd"):-$("tr:odd") This selects all odd tr elements of a table.

$(":only-child"):-  Example $("p:only-child") selects all p elements that are the only child of their parent.

$(":only-of-type"):- Example $("p:only-of-type") It selects all those p elements that are the only p element of their parent.

$("parent> child"):-Selects all the direct child's of the parent. For example: $("ul> li") It selects all direct li element of the ul.

$("parent descendent"):- Selects all the siblings of the parent. For example $("ul li") Selects all li elements of the ul.

$("element + next"):- Example $("ul +div") Selects the div elements that are just next to ul.
 
$("element ~ siblings"):-Example $("div ~ p") Selects all p elements that are siblings of div.

$(":header"):-Selects all header elements.

$("animated"):-Selects all animated elements.

$(":focus"):-Selects element that is currently in focus.

$(":parent"):-Selects all parent element.

$(":hidden"):-Selects all hidden elements but will not work on elements whose visibility property is set to hidden.

$(":empty"):-  Selects all empty elements.

$(":visible"):- Selects all visible elements.

$("root"):- Selects documents root element.

$(":eq(index)"):- Selects the element with the specified index. The index starts with 0. That is, first element will be indexed as 0, second as 1 and therefore. For example: $("li:eq(3)") selects the forth li element.


$(":gt(index)"):- Selects all the elements having index greater than the specified index. That is $("li: gt(1)") will select all the elements after first two elements in the list.

$(":lt(index)"):- Selects all the elements having index less than the specified index. That is $("li: lt(3)") selects first 3 elements having index 0,1,2.

$(":not(selector)"):- Example $("tr: not(:even)") selects all tr elements that are not even.

$(":first-child"):- Example $("p:first-child") Selects all p elements that are first child of their parent.

$(":first-of-type"):- Example $("p:first-of-type") Selects all p elements that are the first p elements of their parent.


$(":last-child"):- Example $("p:last-child") Selects all p elements that are the last child of their parent.

$(":last-of-type"):- Example $("p:last-of-type")  Selects all p elements that are the last p element of their parent.

$(":nth-child(n)"):- Example $("p:nth-child(4))  Selects all p elements that are the 4th child of their parent.

$(":nth-of-type(n)"):- Example $("p:nth-of-type(4)") Selects all p elements that are the 4th p element of their parent.

$(":nth-last-child(n)"):- Example $("p:nth-last-child(4))  Selects all p elements that are the 4th child of their parent counting from the last.

$(":nth-last-of-type(n)"):- Example $("p:nth-last-of-type(4)") Selects all p elements that are the 4th p element of their parent from last.

 $(":input"):- Selects all input elements.

$(":text"):- Selects all input elements with type=text.

$(":password"):- Selects all input elements with type=password.

$(":radio"):- Selects all input elements with type=radio.

$(":checkbox"):- Selects all input elements with type=checkbox.

$(":submit"):- Selects all input elements with type=submit.

$(":button"):- Selects all input elements with type=button.

$(":file"):- Selects all input elements with type=file.

$(":image"):- Selects all input elements with type=image.

$(":reset"):- Selects all input elements with type=reset.

$(":enabled"):- Selects all enabled elements.

$(":disabled"):- Selects all disabled elements.

$(":selected"):- Selects the selected element in a dropdown box.

$(":checked"):- Selects all checked elements of checkboxes or radio buttons.

$("[attribute]"):- Example $("[href]") Selects elements with href attribute.

$("[attribute=value]"):- Selects elements with the specified attribute-value pair.

 $("[attribute!=value]"):-Selects elements with attribute whose value not equal to the specified value. For example $("[src!='C:/xyz/1.jpg']")


$("attribute^=value"):- Example $("input[type^='button']") Selects all input elements whose type starts with button.

$("attribute~=value"):-Example $("[name~='hello'") Selects all elements with attribute name with value containing the word hello.

$("attribute*=value"):-  Example $("[href*='.com'") Selects all elements with attribute herf with value containing the string .com.

$("attribute$=value"):- Example $("[href*='.com'") Selects all elements with attribute herf with value ending with .com.

jQuery noConflict()

We all know that jQuery use $ sign as a shortcut for jQuery. There are other javascript framework also that use $sign as shortcut. So,what if one wants to use another framework also, while still using jQuery and that too uses $sign as a shortcut.

In such a situation if you use both the frameworks simultaneously this may result in that your script does not work.

For such situations jQuery team has implemented noConflict() method. The noConflict() method releases the hold on $ symbol so that other scripts may use it and instead of it you can use the full name. For Example:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
      jQuery("p").text("jQuery is still working!");
});
  });
</script>
</head>
<title>Document1</title>
<body>
<p>Hello World</p>
<button>Click Me</button>
</body>
</html>

The noConflict() method returns a reference to jQuery which you may use to create your own shortcut very easily. For example:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>var name = $.noConflict();
name(document).ready(function(){
      name("p").text("jQuery is still working!");
  });
</script>
</head>
<title>Document1</title>
<body>
<p>Hello World</p>
<button>Click Me</button>
</body>
</html>
Here I, saved the reference returned by noconflict() method in a variable named name and further used it as just another shortcut symbol instead of $.

Introduction to JQuery

We know that JQuery is a javascript library. So, as a first step you need to import its library in order to use its functions, methods and events. You can do this in two ways either download the jQuery library from JQuery.com or include it from a CDN.

CDN stands for Content Delivery Network or Content Distribution Network. It is responsible for delivery or distribution of your content to your visitor’s server. It consists of servers all around the world. When you integrate with CDN, your content gets copied on all its servers. So, when a visitor tries to access your blog or website, content is delivered to him each time from the nearest server geographically instead of your hosting server.

 Once you have downloaded it, now include it into your project by simply including following lines:

<head>
<script src="jquery-1.9.1.min.js"></script>
</head>

Note that you have to import this file using <script> tag under <head> section.

And if you want to include it from a CDN, use one of the following codes:

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

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

Now once you have included its javascript file now you can start using jquery in your code and see results.  

jQuery library contains many features like HTML/DOM manipulation, CSS manipulation,  HTML event methods, effects and animation, Ajax and plug ins for almost any task.

We use $ sign to define or access jQuery. Syntax for using jQuery to access or manipulate any object is:

Syntax: $(selector).action()

For example: To hide all <p> elements on a page we can use: $("p).hide();

And if we want to hide selected <p> elements, that is, when we click any <p> element then only that should hide than:

$("p").click(function(){
$(this).hide();
}

Remember we put all the jQuery code in a special event that is $(document).ready(function()). This is a document ready event. It is a good practice to write the entire jQuery code in this block as it prevents any jQuery code to execute before or while the page is loading. So, the above code goes as:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>

In our next discussion we will check different selectors and events.

What is JQuery and Why

Today everyone in technical world is talking about jQuery, javascript simultaneously. But many few of us are aware of it. Here i'm going to discuss what is jQuery and why we should use it, when we already have javascript which is such a powerful scripting language.

JQuery is nothing, but an open source javascript library. One who is much familiar with javascript, HTML, DOM and CSS will hardly take any time to understand JQuery and to get used to it.

Now the question comes why we should use it. So, here is your answer:

The work that we till now get done through javascript, that could be done much easily without much coding and complexities through JQuery. Yes, all that we used to do with javascript, that could be done with JQuery. 

Apart from it, we all know that javascript has many browser issues while running, but the developers of JQuery has taken into consideration all the browsers issues and developed it with cross browser functions so that it may run easily on any browser.

Again, apart from browser incompatibilities, javascript was unable to decorate a web page or to animate any object on the webpage. JQuery aims to ease all these problems and in addition, there is a very dynamic community that adds more-advanced components based on JQuery.

Again, a modern web page is always incomplete without any Ajax functionality and doing this using javascript includes lots of code and different for different  browsers. While JQuery introduces two simple functions for get and post requests using which implementing Ajax has become a piece of cake.

Next we will be discussing Introduction to JQuery.