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"> 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
<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\"> First
Name</td><td> : "
+
$('#firstname').val();
+
" </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\"> Last
Name</td><td> : "
+
$('#lastname').val();
+
" </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\"> Contact
No.</td><td> : "
+
$('#contactno').val();
+
" </td></tr>";
}
if($('input:radio[name=sex]:checked')){
message
= message
+ "<tr><td
width=\"50%\"
class=\"fontcolorblack\"> Sex</td><td> : "
+
$('input:radio[name=sex]:checked').val();
+
" </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\"> Age
Group</td><td> : "
+
$('#ageGroup').val();
+
" </td></tr>";
}
if($('input:file').val()
== ""){
message
= message
+ "<tr><td
width=\"50%\" class=\"fontcolorblack\"> File
Upload</td><td> : No </td></tr>";
}else{
message
= message
+ "<tr><td
width=\"50%\" class=\"fontcolorblack\"> File
Upload</td><td> : Yes </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\"> Description</td><td> : "
+
$('textarea').val();
+
" </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;
}
});
});
