Posted by: phillipnb | February 12, 2012

Form Validation using JQuery – 1


Welcome to Feb. This month, I thought of deviating from PHP. It is not that I will stop blogging on topics from PHP. I will post topics from PHP if I find something new and different from what we had seen in my earlier posts. But here is something different. In this post we will talk about a client side technology called JQuery. This is not going to be a tutorial on JQuery because there are plenty of sites and blogs that cater JQUery tutorials. Hence we will not discuss the nuts and bolts of JQuery. Those who would like to learn the basics of JQuery should visit this JQuery site. There are also several good books on JQuery.

So, what are we going to discuss here. In this post and in future, we will see some common examples using JQuery which every body uses frequently. Before that, we need to talk about a few basic characteristics of jQuery. They are

  • JQuery is a client side technology
  • It is like javascript, but not exactly javascript. JQuery can be called as a Javascript library
  • JQuery can also be called as unobstructive javascript. You can read about unobstructive javascript from this
    site or from this one

Another term to remember while dealing with jQuery is Document Ready Handler. By using the document ready handler we are asking the browser that loads our web page with the jquery script to execute our jquery code after loading the DOM or wait till the DOM has been fully loaded.

Let us start playing with a few examples: Our goal here is to do form validation using JQuery. In this post we will validate a input field called ‘first name’. We will check whether the ‘first name’ is empty or has been filled by the user. If it is empty, we’ll use JQuery to alert the user saying that that the ‘first name’ field is empty. Here is the html and JQuery code for this.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#subbtnid").click(function(){
    var val = $("#fname").val();
    if ((val == 'undefined') || (val == ''))
    {
    	alert('First Name is a required field. It is empty!');
    }
  });
});
</script>

</head>
<body>
<form action='#' method="post">
<p>First Name
<input type="text" value="" name="first_name" id="fname"/><br/>
<input type="submit" value="Submit" name="subbtn" id="subbtnid"/>
</p>
</form>
</body>
</html>

Of course, the same thing that I have shown above can be achieved in different ways. For example: I have used the ‘id’ of the form element to identify the form element. You can also use the ‘name’ attribute etc etc. In the months ahead, we will play with the form validation of other types of form elements like radio buttons, check boxes and so on. Remember, for all these to happen we need to either down load the jquery library and link it to it, just like I have did (script type=”text/javascript” src=”jquery-1.7.1.js) or we can also point it to the library.

Advertisements

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

Categories

%d bloggers like this: