HTML Code here
1. Before form Submitting
Registration form looks like above containing fields Username, Email Id, Password, Retype password, Mobile number. We generally know that
1. User name canbn't be blank
2. Email should be valid
3. Password length should be greater than 8 Characters
4. Retype password should match to password
5. And finally valid 10 digit mobile number
2. After Submitting
I put equred validation for all fields except retype password where it checks for password match. and valid email validation for email field. And password length shold be 8 characters and Mobile number sholud be 10 digits. You are looking at validation below.
3. On Successful validation
On all conditions satisfied successfull message will shown.
<style type="text/css" >
.arrow-left
{
margin-top: 12px;
float: left;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #e2e2e2;
z-index: 1000;
}
.tool_tip
{
background: #e2e2e2;
color: red;
padding-left: 5px;
padding-right: 5px;
height: 24px;
line-height: 24px;
font-size: 11px;
font-style: italic;
margin-top: 8px;
float: left;
border: solid 1px silver;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 99;
}
.tooltip_outer
{
margin-top: -10px;
display: inline;
padding-left: 5px;
margin-right: 0px;
position: absolute;
z-index: 2;
}
</style>
JQuery Script here
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//function to allow only numbers
function numericsonly(ob)
{
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value))
{
ob.value = ob.value.replace(invalidChars,"");
}
} //function to allow only numbers ends here
//On page load hide all tool tips
$('.required').next('.tooltip_outer_feedback').hide();
$('.required_feedback').next('.tooltip_outer').hide();
//---
//Onpage load
$(document).ready(function()
{
//On key up in texbox's hide error messages for required fields
$('.required').keyup(function()
{
$(this).next('.tooltip_outer').hide();
});
//On selected item change in dropdownlist hide error messages for required fields
$('.dpreq').change(function()
{
$(this).next('.tooltip_outer').hide();
});
//On key up for mobile number avoid non-numeric characters
$('.mobile').keyup(function()
{
$(this).next('.tooltip_outer').hide();
numericsonly(this); // definition of this function is above
});
// On button click or submitting values
$('.btn_validate').click(function(e)
{
var empty_count=0; // variable to store error occured status
$('.required').next('.tooltip_outer').hide();
$('.required').each(function()
{
if($(this).val().length === 0)
{
$(this).after("<div class='tooltip_outer'><div class='arrow-left'></div> <div class='tool_tip'>Can't be blank</div></div>").show("slow");
empty_count=1;
}
else
{
$(this).next('.tooltip_outer').hide();
if($(this).hasClass('mobile'))
{
if($(this).val().length != 10)
{
$(this).after('<div class="tooltip_outer"><div class="arrow-left"></div> <div class="tool_tip">Mobile should be 10 digits</div></div>').show("slow");
empty_count=1;
}
else
{
$(this).next('.tooltip_outer').hide();
}
}
if($(this).hasClass('email'))
{
$(this).next('.tooltip_outer').hide();
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if(filter.test($(this).val()) === false)
{
$(this).after('<div class="tooltip_outer"><div class="arrow-left"></div> <div class="tool_tip">Invalid Email</div></div>').show("slow");
empty_count=1;
}
else
{
$(this).next('.tooltip_outer').hide();
}
}
if($(this).hasClass('password'))
{
$(this).next('.tooltip_outer').hide();
if($(this).val().length < 8)
{
$(this).after("<div class='tooltip_outer' style='color:red; float:right;'><div class='arrow-left'></div> <div class='tool_tip'>length must be 8 and above</div></div>").show();
empty_count=1;
}
else
{
$('.comfirm_password').next('.tooltip_outer').hide();
if($(this).val()===$('.comfirm_password').val())
{
$(this).next('.tooltip_outer').hide();
}
else
{
$('.comfirm_password').after("<div class='tooltip_outer' style='color:red; float:right;'><div class='arrow-left'></div> <div class='tool_tip'>Password mismatch</div></div>").show();
empty_count=1;
}
}
}
}
});
$('.dpreq').next('.tooltip_outer').hide();
$('.dpreq').each(function()
{
$(this).next('.tooltip_outer').hide();
if($(this).attr("selectedIndex") === 0)
{
$(this).after("<div class='tooltip_outer'><div class='arrow-left'></div> <div class='tool_tip'>Please select option</div></div>").show("slow");
empty_count=1;
}
else
{
$(this).next('.tooltip_outer').hide();
}
});
if(empty_count===1)
{
e.preventDefault();
}
else
{
$('.tooltip_outer').hide();
alert('Successful');
}
}
);
});
</script>
Source code here
<table style="width: 600px; border: solid 1px silver; color: #565656; line-height: 25px;">
<tr>
<td class="Header_style" colspan="2" align="center">
Registration form
</td>
</tr>
<tr>
<td colspan="2" align="center">
<hr />
</td>
</tr>
<tr>
<td style="width: 200px;">
</td>
<td style="width: 400px;">
</td>
</tr>
<tr>
<td style="width: 200px;">
User name
</td>
<td style="width: 400px;">
<asp:TextBox ID="TextBox1" runat="server" class="required"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 200px;">
Email Id
</td>
<td style="width: 400px;">
<asp:TextBox ID="TextBox2" runat="server" class="required email"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 200px;">
Password
</td>
<td style="width: 400px;">
<asp:TextBox ID="TextBox3" runat="server" class="required password" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 200px;">
Retype password
</td>
<td style="width: 400px;">
<asp:TextBox ID="TextBox4" runat="server" class="password comfirm_password" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 200px;">
Mobile Number
</td>
<td style="width: 400px;">
<asp:TextBox ID="TextBox5" runat="server" class="required mobile"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 200px;">
</td>
<td style="width: 400px;">
</td>
</tr>
<tr>
<td style="width: 200px;">
</td>
<td style="width: 400px;">
<asp:Button ID="Button1" class="button_style btn_validate" runat="server" Text="Button" />
</td>
</tr>
</table>
Snapshot for Registration form is below1. Before form Submitting
Registration form looks like above containing fields Username, Email Id, Password, Retype password, Mobile number. We generally know that
1. User name canbn't be blank
2. Email should be valid
3. Password length should be greater than 8 Characters
4. Retype password should match to password
5. And finally valid 10 digit mobile number
2. After Submitting
I put equred validation for all fields except retype password where it checks for password match. and valid email validation for email field. And password length shold be 8 characters and Mobile number sholud be 10 digits. You are looking at validation below.
3. On Successful validation
On all conditions satisfied successfull message will shown.
0 comments:
Post a Comment