<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<style type="text/css">
.ui-datepicker
{
font-size: 8pt;
font-family: Verdana;
}
</style>
<style type="text/css">
.textn{
font-family : Tahoma,Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
font-style : normal;
font-variant : normal;
color:#000000;
}
input{
border: 1px solid;
background-color: #ffffff;
border-color: #13A9FF;
font-family: verdana;
font-size: 12px;
font-weight: normal;
}
select{
border: 1px solid;
background-color: #ffffff;
border-color: #13A9FF;
font-family: verdana;
font-size: 12px;
font-weight: normal;
}
textarea{
border: 1px solid;
background-color: #ffffff;
border-color: #13A9FF;
font-family: verdana;
font-size: 12px;
font-weight: normal;
}
#trOdd{
background-color: #F4BE2C;
}
#trEven{
background-color: #F4BE2C;
}
#tdCount{
background-color: #F4BE2C;
}
#divBrDetails{r
background-color: White;
display:block;
width:350px;
height:75px;
position:relative;
border: 1px solid #13A9FF;
margin: 2px 2px 2px 2px;
padding: 2px 5px 2px 5px;
font-size: 10px;
font-family: tahoma,Verdana, Geneva, Arial, Helvetica, sans-serif;
font-variant: normal;
font-weight: normal;
color: black;
z-index: 101;
}
.txtsuper{
font-family : Tahoma,Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 13px;
font-style : normal;
font-variant : normal;
color: Red;
font-weight: bolder;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
NumberValidate();
AplhabetsValidate();
$(".require").each(function() {
if($(this).attr('class') === "numeric")
{
NumberValidate();
}
$(this).change(function() {
Validate();
});
});
$("select").each(function() {
$(this).change(function() {
Validate();
});
});
function NumberValidate(){
$(".numeric").each(function() {
$(this).keydown(function (evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
if ((charCode != 8 && charCode !=9)&&(charCode < 37 || charCode >39)&&(charCode < 95 || charCode > 105)&&(charCode < 48 || charCode > 57)&&(charCode !=40)){
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('Only Numeric values allowed.');
$(this).css('border-color','red' ).css('border-width','2px');
return false;
}else {
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('');
$(this).css('border-color','' ).css('border-width','');
return true;
}
});
});
}
<!-- character only event validation -->
function AplhabetsValidate(){
$(".alphabet").each(function() {
$(this).keydown(function (evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
if ((charCode != 8 && charCode !=9)&&(charCode != 20 && charCode !=46)&&(charCode < 37 || charCode >39)&&(charCode < 65 || charCode > 90)&&(charCode < 97 || charCode > 112)&&(charCode !=32)){
//alert("only digit.");
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('Only Alphabets values allowed.');
$(this).css('border-color','red' ).css('border-width','2px');
return false;
}else {
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('');
$(this).css('border-color','' ).css('border-width','');
return true;
}
});
});
}
function Validate()
{
var result = true;
$(".require").each(function() {
if($(this).val() === "")
{
$(this).css('border-color','red' ).css('border-width','2px');
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html($(this).attr('validate'));
result = false;
}
else
{
$(this).css('border-color','' ).css('border-width','');
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('');
}
});
$("select").each(function() {
if($(this).val() === "0")
{
$(this).css('border-color','red' ).css('border-width','2px');
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html($(this).attr('validate'));
result = false;
}
else
{
$(this).css('border-color','' ).css('border-width','');
var error = "#lbl-"+$(this).attr('id').split('-')[1];
$(error).html('');
}
});
return result;
}
$("#submit").click(function() {
if (Validate() === true)
{
return true;
}
else
{
return false;
}
});
});
</script>
<form name="form" id="form">
<center>
<table >
</center>
<tr>
<td>
Name:
</td>
<td>
<input type ="text" class="alphabet require" name="txt1" id ="txt-firstname" validate="Please enter the first name"/>
<label id="lbl-firstname" style="color:red"></label>
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type ="text" class="alphabet require" name="txt2" id ="txt-lastname" validate="Please enter the last name"/>
<label id="lbl-lastname" style="color:red"></label>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<input type ="text" class="alphabet" name="txt3" id ="txt-address" validate="Please enter the address"/>
<label id="lbl-address" style="color:red"></label>
</td>
</tr>
<tr>
<td>
Mobile:
</td>
<td>
<input type ="text" class="numeric" name="txt5" id ="txt-mobile" validate="Please enter the Mobile"/>
<label id="lbl-mobile" style="color:red"></label>
</td>
</tr>
<tr>
<td>
email id:
</td>
<td>
<input type ="text" class="alphabet" name="txt4" id ="txt-email" validate="Please enter the email id"/>
<label id="lbl-email" style="color:red"></label>
</td>
</tr>
<tr>
<td>
State:
</td>
<td>
<select id="ddl-state" name="select1" validate="Please select the state">
<option value="0">--selest--</option>
<option value="Uttar pradesh">Uttar pradesh</option>
<option value="Bihar">Uttar pradesh</option>
</select>
<label id="lbl-state" style="color:red"></label>
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<select id="ddl-city" name="select2" validate="Please select the city">
<option value="0">--selest--</option>
<option value="Ghaziabad">Uttar pradesh</option>
<option value="Luclnow">Uttar pradesh</option>
</select>
<label id="lbl-city" style="color:red"></label>
</td>
</tr>
<tr>
<td>
<input type="submit" id="submit" name="submit" value="Submit" / >
</td>
<td>
<input type="reset" id="reset" name="reset" value="Reset" / >
</td>
</tr>
</table>
</form>
No comments:
Post a Comment