Thursday, August 22, 2013

jQuery Example 01 ( HTML Form selectors )


jQuery Example 01 ( HTML Form selectors )

jQuery has many form selectors to access the form elements more easily and efficiently.
Here I give the simple example of a HTML for with the fields of text box, radio button, drop down list ( select option ), text area and file element.
This example handle the form input validations by using jQuery capabilities. First I show the out puts and then show the html, css, and jQuery js which wrote to complete this example.
1) Display Registration Form



2) Display Registration Form ( with form elements validation )





















3) Display Registration Form ( with the enter input elements valies )



4) HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">@IMPORT url("css/jQueryExample01.css");</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="JQueryJS/jQueryExample01.js"></script>
</head>
<body>
<div id="divHeader" class="headerfont columnTopPadding">&nbsp;&nbsp;User Registration Form</div>
<div id="registration_info" style="display:none;">
<p id="msg" class="fontcolorblue">
</div>
<div id="content" class="divTable">
<!-- Text Box -->
<div class="divRow">
<div class="divColumn">First Name</div>
<div class="divColumn">
<input type="text" id="firstname" size="20" maxlength="20" class="border"/>
<label for="firstname" class="errorfontred" id="errfirstname" style="display:none">Enter your first name correctly</label>
</div>
</div>
<div class="divRow">
<div class="divColumn">Last Name</div>
<div class="divColumn">
<input type="text" id="lastname" size="20" maxlength="20" class="border"/>
<label for="lastname" class="errorfontred" id="errlastname" style="display:none">Enter your last name correctly</label>
</div>
</div>
<div class="divRow">
<div class="divColumn">Contact Number</div>
<div class="divColumn">
<input type="text" id="contactno" size="20" maxlength="20" class="border"/>
<label for="contactno" class="errorfontred" id="errcontactno" style="display:none">Enter your contact number correctly</label>
</div>
</div>
<!-- Radio Button -->
<div class="divRow">
<div class="divColumn">Sex</div>
<div class="divColumn">
<input type="radio" name="sex" value="Male" checked="checked">Male&nbsp;&nbsp;
<input type="radio" name="sex" value="Female">Female
</div>
</div>
<!-- Drop down list -->
<div class="divRow">
<div class="divColumn">Age Group</div>
<div class="divColumn">
<select id="ageGroup" name="ageGroup" class="border" >
<option value="0">Please select</option>
<option value="21-30">21-30</option>
<option value="31-40">31-40</option>
<option value="41-50">41-50</option>
</select>
<label for="ageGroup" class="errorfontred" id="errageGroup" style="display:none">Select the age group</label>
</div>
</div>
<!-- File -->
<div class="divRow">
<div class="divColumn">File to upload</div>
<div class="divColumn">
<input type="file" id="file" class="border"/>
</div>
</div>
<!-- text area -->
<div class="divRow">
<div class="divColumn">Description</div>
<div class="divColumn">
<textarea id="description"cols="40" rows="10" class="border"></textarea>
<label for="description" class="errorfontred" id="errdescription" style="display:none">Please describe your self</label>
</div>
</div>
<!-- Buttons -->
<div class="divRow">
<div class="divColumn columnTopPadding"><button id="reset">Reset</button></div>
<div class="divColumn columnTopPadding"><button id="submit">Submit</button></div>
</div>
</div>
</body>
</html>

5) CSS file
body{
background-color: lightblue; color: black;
font-family: Verdana; font-size: 12px; font-style: normal;
}
.divTable{
width: 50%; display:block; padding-top:10px;
padding-bottom:10px; padding-right:10px; padding-left:10px;
}
.divRow{
width: 99%; display:block;
}
.divColumn{
float: left; width: 48%; display:block;
padding-top:5px; padding-bottom:5px;
}
.columnTopPadding{
padding-top: 10px;
}
.border{
border: 1px; border-style: solid; border-color: blue; color: black;
}
.errorborder{
border-color: red; border: 2px;
}
.headerfont{
color: blue; font-size: 16px;
}
.fontcolorblack{
color: black;
}
.fontcolorblue{
color: blue;
}
.errorfontred{
color: red;
}


6) jQuery JS file
$(function(){
 
  $("#reset").click(function(){
      $("#firstname").val("");
      $("#lastname").val("");
      $("#contactno").val("");
      $('input:radio[name=sex]').filter('[value=Male]').prop('checked', true);
      $("#ageGroup").val("0");
      $('input:file').val("");
      $('textarea').val("");
  });

  $("#submit").click(function(){
     
     var message = "<table width=\"300px\" border=\"1px\">";
     var count = 0;

     if($('#firstname').val() == ""){
         $("#errfirstname").css({"display":"block"});
         $("#firstname").css({"color":"black","border":"2px solid red"});
     }else{
         $("#errfirstname").css({"display":"none"});
         $("#firstname").css({"color":"black","border":"1px solid blue"});
         count = count + 1; //1
         message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;First  Name</td><td>&nbsp;:&nbsp;" + $('#firstname').val(); + "&nbsp;</td></tr>";
     }

     if($('#lastname').val() == ""){
          $("#errlastname").css({"display":"block"});
          $("#lastname").css({"color":"black","border":"2px solid red"});
     }else{
          $("#errlastname").css({"display":"none"});
          $("#lastname").css({"color":"black","border":"1px solid blue"});
          count = count + 1; //2
          message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;Last Name</td><td>&nbsp;:&nbsp;" + $('#lastname').val(); + "&nbsp;</td></tr>";
     }

     if($('#contactno').val() == ""){
          $("#errcontactno").css({"display":"block"});
          $("#contactno").css({"color":"black","border":"2px solid red"});
     }else{
          $("#errcontactno").css({"display":"none"});
          $("#contactno").css({"color":"black","border":"1px solid blue"});
          count = count + 1; //3
          message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;Contact No.</td><td>&nbsp;:&nbsp;" + $('#contactno').val(); + "&nbsp;</td></tr>";
      }

     if($('input:radio[name=sex]:checked')){
          message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;Sex</td><td>&nbsp;:&nbsp;" + $('input:radio[name=sex]:checked').val(); + "&nbsp;</td></tr>";
     }

     if($("#ageGroup").val() == "0"){
         $("#errageGroup").css({"display":"block"});
         $("#ageGroup").css({"color":"black","border":"2px solid red"});
     }else{
         $("#errageGroup").css({"display":"none"});
         $("#ageGroup").css({"color":"black","border":"1px solid blue"});
         count = count + 1; //4
         message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;Age Group</td><td>&nbsp;:&nbsp;" + $('#ageGroup').val(); + "&nbsp;</td></tr>";
     }

     if($('input:file').val() == ""){
          message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;File Upload</td><td>&nbsp;:&nbsp;No&nbsp;</td></tr>";
     }else{
          message = message + "<tr><td width=\"50%\" class=\"fontcolorblack\">&nbsp;File Upload</td><td>&nbsp;:&nbsp;Yes&nbsp;</td></tr>";
     }

     if($('textarea').val() == ""){
          $("#errdescription").css({"display":"block"});
          $('textarea').css({"color":"black","border":"2px solid red"});
     }else{
          $("#errdescription").css({"display":"none"});
          $('textarea').css({"color":"black","border":"1px solid blue"});
          count = count + 1; //5
          message = message + "<tr><td width=\"50%\" valign=\"top\" class=\"fontcolorblack\">&nbsp;Description</td><td>&nbsp;:&nbsp;" + $('textarea').val(); + "&nbsp;</td></tr>";
     }

     if(count == 5){
          message = message + "</table>";
          $("#registration_info").css("display","block");
          $("#msg").html(message);
     }
});

  //Checks inputs for a-z
  $("#firstname").keypress(function(evt){
       var key =evt.keyCode || evt.which;
       var charCode = (evt.which) ? evt.which : evt.keyCode;
       key = String.fromCharCode( key );
       var CHAR_VALIDATOR = /^([a-zA-Z]+)$/;
       if(!(CHAR_VALIDATOR.test(key) ||charCode==4||charCode== 8 ||charCode==9 )) {
           return false;
       }else{
           $("#errfirstname").css({"display":"none"});
           $("#firstname").css({"color":"black","border":"1px solid blue"});
           return true;
       }
  });

  //Checks inputs for a-z
  $("#lastname").keypress(function(evt){
      var key =evt.keyCode || evt.which;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      key = String.fromCharCode( key );
      var CHAR_VALIDATOR = /^([a-zA-Z]+)$/;
      if(!(CHAR_VALIDATOR.test(key) ||charCode==4||charCode== 8 ||charCode==9 )) {
           return false;
      }else{
           $("#errlastname").css({"display":"none"});
           $("#lastname").css({"color":"black","border":"1px solid blue"});
           return true;
      }
  });
 
  //Checks inputs for numbers
  $("#contactno").keypress(function(evt){
       var key =evt.keyCode || evt.which;
       var charCode = (evt.which) ? evt.which : evt.keyCode;
       key = String.fromCharCode( key );
       var CHAR_VALIDATOR = /[0-9]/;
       if(!(CHAR_VALIDATOR.test(key) ||charCode==4||charCode== 8 ||charCode==9 )) {
           return false;
       }else{
           $("#errcontactno").css({"display":"none"});
           $("#contactno").css({"color":"black","border":"1px solid blue"});
           return true;
       }
  });

  $('textarea').keypress(function(evt){
      var key =evt.keyCode || evt.which;
      if(key != ""){
          $("#errdescription").css({"display":"none"});
          $('textarea').css({"color":"black","border":"1px solid blue"});
          return true;
     }
  });
 
  $('#ageGroup').click(function(){
       $("#errageGroup").css({"display":"none"});
       $("#ageGroup").css({"color":"black","border":"1px solid blue"});
       return true;
  });
 
  $('#ageGroup').keypress(function(evt){
       var charCode = (evt.which) ? evt.which : evt.keyCode;
       if(charCode==4||charCode== 8 ||charCode==9 ||charCode==37 ||charCode==38   ||charCode==39 ||charCode==40 ){
           $("#errageGroup").css({"display":"none"});
           $("#ageGroup").css({"color":"black","border":"1px solid blue"});
           return true;
        }
   });
});
Posted by at
Labels: