JQuery Project

In this tutorial we are going to create a JQyery Project. We will create a project that implements all or most of the knowledge that we have gained upto this point. It will include HTML, javascript, CSS, jquery, events and effects that we have gone through till now.

In this Jquery Project we are going to create a form to take input from a user and have some animation and validation also in it.
View of the final form is shown below:

final_output
fig 1

So let’s start the process step by step.

  1. Create a folder on the desktop and name it “sec4_ch9”.
  2. Inside the folder “sec4_ch9”, create 2 folders named “CSS” and “js” respectively. CSS folder will be required to store .css file and js folder will be required to store javascript files.
  3. Open a new notepad++ document and save it as “project.html” in the newly created folder “sec4_ch9”.
  4. Write the following code in “project.html” document and save it.
  5. <!DOCTYPE html>
    <html>
    <head>
    <title>Tabbed Form </title>
    </head>
    <body>
    </body>
    </html>
    

    Output of the above code when the page is opened in the browser is shown below:

    initial_output_of_html_code
    fig 2

  6. Our sec4_ch9 folder has the following content:
  7. sec4_ch9_folder
    fig 3

  8. Create a file named jquery.js in the folder js which is inside sec4_ch9 folder on desktop.
  9. Download jquery 1.x compressed version from jQuery.com by clicking on the hyperlink Download the compressed, production jQuery 1.11.0. as explained in the previous session.
  10. Copy all the code that appears and paste it in the newly created jquery.js file in step 6. Save the file and close it.
  11. We will be requiring this jquery.js file in our project so we need to link it with our project.html document. Follow the code written in head section to link the javascript file :
  12. <head>
    <title>Tabbed Form </title>
    <script src="js/jquery.js" type="text/javascript"></script>
    </head>
    
    • Here, src attribute has the value “js/jquery.js”. This is the path of jquery.js file. jquery.js file is located in the js folder which is in turn located in the sec4_ch9 folder where project.html document is located.
    • Since project.html document and js folder are located in the same folder, the path till js folder is known to project.html. Hence path to jquery.js file is given only “js/jquery.js”.
  13. Write the following code to create a form in project.html document body section.
  14. <body>
     <form name="myform" onsubmit="return validateForm()">
      <ul>
       <li class="title">Who Are You?</li>
       <li class="fields">
       <label>*First Name : </label><br/>
       <input id="first_name" type="text" class="req"/><br/>
       <label>Middle Name : </label><br/>
       <input id="middle_name" type="text"/><br/>
       <label>Last Name : </label><br/>
       <input id="last_name" type="text"/><br/>
       <label>*Email : </label><br/>
       <input id="email" type="text" class="req"/><br/>
       </li>
       
       <li class="title">Where Are You?</li>
       <li class="fields">
       <label>City : </label><br/>
       <input id="city" type="text"/><br/>
       <label>*State : </label><br/>
       <input id="state" type="text" class="req"/><br/>
       <label>Country : </label><br/>
       <input id="country" type="text"/><br/>
       </li>
       
       <li class="title">What Do You Do?</li>
       <li class="fields">
       <label>*Occupation : </label><br/>
       <input id="occupation" type="text" class="req"/><br/>
       <label>Company : </label><br/>
       <input id="company" type="text"/><br/>
       <label>Company Location : </label><br/>
       <input id="location" type="text"/><br/>
       </li>
      </ul>
     </form>
    </body>
    
    • Explanation of the above code:
      • The form in the above code is given a name myform in the name attribute of the form tag and a function validateForm() is called on its onsubmit event.
      • The label and input elements are arranged in an un-ordered list.
      • Mandatory input field is shown by specifying an asterisk(*) on its label.
      • The li tags for all the headings in the form viz. Who Are You?, Where Are You? and What Do You Do? define a class called title that can be styled later in the .css file.
      • The li tags for the input fields define a class called fields for styling.
      • The mandatory input fields also define a class called req that will be used for validation later.
      • This was the designing part of the form. The output of the form is shown below:
      • simple_form_output
        fig 4

        • Thus we finished the designing part i.e. HTML part of JQuery Project
      • This form looks very ugly. It need to be styled to make it look attractive and comfortable for user to fill it.
  15. Now open another new notepad++ document and save it as style.css in the folder CSS which is inside sec4_ch9 folder.
  16. Write the following code in this style.css file and save it:
  17. body{
    	width:500px;
    	margin:auto;
    	text-align:center;
    }
    
    li{
    	list-style:none;
    }
    
    li.fields{
    	margin:0;
    	padding:1em 0;
    }
    
    li.title{
    	cursor:pointer;
    	font-weight:bold;
    	font-size:1.5em;
    	line-height:2em;
    	background:#e3e3e3;
    	border-bottom:1px solid #c5c5c5;
    	border-top:1px solid white;
    }
    
    .hide{
    	display:none;
    }
    
    • Explanation of the above css code:
      • The above code is used to make the form presentation more attractive.
      • As we saw in fig 4, the form elements are aligned towards the left side of the browser.
      • So to align all the form elements at the center we use the following code snippet:
      • body{
        	width:500px;
        	margin:auto;
        	text-align:center;
        }
      • Here, body with curly braces indicates that whatever styling done inside it will be applied to all the elements on the page.
      • So we have applied a width of 500 pixels and have aligned text at the center.
      • margin:auto; indicates that all the elements will take their place at the center no matter how small or big the browser window is.
      • Due to this body styling all the form elements will br arranged at the center along with the text.
      • Next styling is applied to the li tag as shown below:
      • li{
        	list-style:none;
        }
      • Here, list-style:none; will remove all the bullets of un-ordered list.
      • Next we have a class fields defined in li tags. Its styling is shown below:
      • li.fields{
        	margin:0;
        	padding:1em 0;
        }
      • Here, the li with class fields is given no margin. But a padding of 1em is given at top and bottom of the li tag containing fields as its class and no padding is given to left and right.
      • Next we have the class title that is defined in the li tag of the 3 headings. Styling of title class is shown below:
      • li.title{
        	cursor:pointer;
        	font-weight:bold;
        	font-size:1.5em;
        	line-height:2em;
        	background:#e3e3e3;
        	border-bottom:1px solid #c5c5c5;
        	border-top:1px solid white;
        }
        
      • The title class is styled with the following styles:
      • cursor:pointer; indicates that when the cursor is positioned on the li tag element having class title, it will turn to a hand pointer.
      • font-weight:bold; will make the text of the li tag content bold.
      • font-size:1.5em; will increase the size of the li tag content to 1.5em.
      • line-height:2em; will increase the padding block height to 2em.
      • background:#e3e3e3; will give a faint grey background color to the li tag containing title as its class.
      • border-bottom:1px solod #c5c5c5; This will give a solid bottom border of 1 pixel with a slight dark grey color than the previous.
      • border-top:1px solid white: will give a solid top border of 1 pixel with white color.
      • The next styling is for the class hide. It is shown below:
      • .hide{
        	display:none;
        }
      • This is used in the animation part of the project. We will focus on it later.
  18. The styling done in the style.css file will be applicable to the project.html document only after it is linked with it. So link the style.css document with the project.html document by adding the following link tag in the head section of project.html document:
  19. <link rel="stylesheet" href="CSS/style.css" type="text/css"/>
  20. Now reload the browser and see the output, the form will look as shown below:
  21. project_form_after_styling
    fig 5

    • Thus we finished the styling part of JQuery Project
  22. We now want to animate our form.
    • We want the tabs Where Are You? and What Do You Do? be closed initially and the fields of only Who Are You? tag should be shown.
    • For this we need to slide the heading tabs viz. Where Are You? and What Do You Do? downwards and their fields upwards. This is just to make it more comfortable to the user.
    • So now open a new notepad++ document and save it as animation.js in the js folder which is inside sec4_ch9 on the desktop.
    • Write the following code in it:
    • $(document).ready(function(){
        $('li.fields').filter(':nth-child(n+4)').addClass('hide');
        $('ul').on('click','li.title',function(){
          $(this).next().slideDown(200).siblings('li.fields').slideUp(200);
        });
      });
      
      • Explanation of the above css code:
        • We are using jquery for animating our form.
        • As we know, jquery code should execute only after the HTML document is ready we use the code shown below and write all the functions in this ready code block itself:
        • $(document).ready(function(){
                 // code here
          });
        • Here, $(document) is the selector that selects the HTML document and .ready(function(){ // code; }); starts executing jquery only when the selected html document is ready. The function () in ready function is its parameter.
        • Now our task is to initially hide the fields of tabs Where Are You? and What Do You Do? on page load. Hence the following statement:
        • $('li.fields').filter(':nth-child(n+4)').addClass('hide');
        • In this statement, we have first selected the list item that defines class fields using $(‘li.fields’) selector.This will select all the input fields on the form.
        • Now from the selected fields we have filtered the first 4 fields using .filter(‘:nth-child(n+4)’).
        • The purpose of .filter() in jquery is to reduce the set of matched elements to those that match the selector or pass the function’s test.
        • Value in the .filter() i.e. :nth-child(n+4) is a pseudo code used to select ‘n’ number of elements.
        • This nth-child pseudo code generally selects all elements that are the nth-child of their parent. Value of nth is “1 indexed” i.e. counting starts from 1.
        • So if you write :nth-child(n) , it will select all the elements.
        • But in our above code we have selected only first 4 fields and filtered it from the set of selected fields.
        • Next we have added a class called hide to the selected fields.
        • We had seen the styling of hide class in style.css file and had talked about discussing it later. This is the time for it.
        • Let us recall the styling for hide class:
        • .hide{
          	display:none;
          }
        • Here, we have used a display selector with value none for the hide class.
        • So in animation.js file, as we have added this hide class to the selected fields, it will hide all these selected fields initially.
        • But we want the user to fill the form, so we will have to create a macanism to again make these fields visible.
        • This is done by the following code:
        • $('ul').on('click','li.title',function(){
           $(this).next().slideDown(200).siblings('li.fields').slideUp(200);
          });
        • Here, we have selected the ul tag and used the .on action. Instead of using any perticular event directly we can use .on action and specify the event in it.
        • Task we want to perform is, when the user clicks on any of the tabs viz. Who Are You?, Where Are You? and What Do You do?, it should slide downwards and the fields that have been hidden previously should slide upwards.
        • Syntax for .on action is .on(‘an event’, ’the perticular element on which the event occurs’, a function performing task on occuring the event).
        • So in the above function we have provided click event, the li tag that defines the class title and the function containing code to achieve our objective.
        • The statement inside the function is given below:
        • $(this).next().slideDown(200).siblings('li.fields').slideUp(200);
        • In this, $(this) indicates the current element on which the click event have occurred. In simple words it represents the element on which we have clicked now.
        • The function next() indicates the next element i.e. the element below or next to the selected one.
        • slideDown(200) as we have seen in previous session is used to make an element to slide downwards.
        • siblings(‘li.fields’) selects the fields of the selected tab i.e. the tab on wich we have clicked.
        • slideUp(200) allows the selected fields to slide upwards.
        • In this way, when a user will click on any tab, the tab below it will appear to slide down and the the fields of selected tab will move upwards thus creating animation.
  23. Now after completing the file animation.js we need to link it with project.html document. Write the following script tag in head section for this:
  24. <script src="js/animation.js" type="text/javascript"></script>
  25. Now reload the browser and view the output as shown below:
  26. animation_output
    fig 6

    • Thus we finished the animation part of JQuery Project.
  27. Now its time for validation.
    • We will use javascript code for validation. So open a new notepad++ document and save it as validation.js in the js folder that is in sec4_ch9 folder on desktop.
    • Write the following code in this validation.js file:
    • function validateForm()
      {
        for(var i=0;i<myform.elements.length;i++)
        {
         if(myform.elements[i].className=="req" && myform.elements[i].value.length==0)
         {
      	alert('Please fill in all required fields');
      	return false;
         }
        }
      	
         var email=document.getElementById('email').value;
         var atpos=email.indexOf('@');
         var dotpos=email.lastIndexOf('.');
      	
         if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
         {
      	alert('Please type a valid email address');
      	return false;
         }
      }
      
        Explanation of the above css code:

        • In validation.js file we have written a function validateForm() that called on the submit event i.e. when we click on the submit button.
        • In this function, the code
        • for(var i=0;i<myform.elements.length;i++)
          {
          	if(myform.elements[i].className=="req" &&  myform.elements[i].value.length==0)
          	{
          		alert('Please fill in all required fields');
          		return false;
          	}
          }
          
        • Validates all the reqiured fields, those that have asterisk on their labels.
        • The for loop iterates from 0 to the count of the number of elements on the form which we get from myform.elements.length.
        • Next if statement checks a condition for each and every element as the loop iterates. The condition it checks is that if the element is given a class, then is that class “req” and if the class of element is “req”, then is that field empty.
        • If the above condition evaluates to true, then an alert message saying “Please fill in all required fields” is given.
        • The statement return false; replaces the evaluation output true with false. I mean when our condition evaluated to true an alert message is shown to us,because it returns true value. But if we return false,we replace our output of evaluation of if condition true with false. So it will not show us the alert message again and again, till the loop evaluates.
        • Next we have validated the email address field for valid email address with the following code:
        • var email=document.getElementById('email').value;
          	var atpos=email.indexOf('@');
          	var dotpos=email.lastIndexOf('.');
          	
          	if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
          	{
          		alert('Please type a valid email address');
          		return false;
          	}
          
        • Here, we have retrieved the value written by the user in the email field and stored it in the variable email using the statement
        • var email=document.getElementById('email').value;
        • Next we want to check the position of the “@” and period(.) in the email id to decide if it is valid or not.
        • So index of “@” and period is retrieved and stored in the variables atpos and dotpos respectively using the statements
        • var atpos=email.indexOf('@');
          var dotpos=email.lastIndexOf('.');
        • We are using lastIndexOf(‘.’) to make sure that period(.) comes after the “@” in the email id.
        • After getting this we check if both @ and period(.) are at the wrong position in the email id with the if condition statement
        • if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
        • If this condition evaluates to true, an alert message saying “Please type a valid email address” is shown.
        • return false is used to avoid continuous alert messages as explained above.
        • Thus we finished the validation part of JQuery Project
        • Output with validation is shown below:
        • Output when required fields are not filled:
        • required_field_validator_output
          fig 7

        • Output when required fields are filled but a valid email address is not given:
        • email_validator_output
          fig 8

Thus we finished developing our JQuery Project with the implementation of HTML, events, effects in jquery along with javascript.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -