Generally freshers ignores java scripting in initial stages when coming to ASP.Net. Some developers think its tough to understand java script. For those here are few scripts which they can use in there web applications. As a learner my seniors thought me to avoid validators which comes with .Net framework to do the clint side validations. Lets get started.
First let us see how to create a javascript page
right click on your project solution and select add new item--> jscript.
Now let us write some basic functions
1. Required field validator
function validRequiredField(text,msg)
{
if((document.getElementById(text).value)=="")
{
alert(msg);
document.getElementById(text).focus();
return false;
}
else
return true;
}
2.Drop down field validator
function validRequiredSelect(text,msg)
{
if(document.getElementById(text).selectedIndex==0)
{
alert(msg);
document.getElementById(text).focus();
return false;
}
else
return true;
}
3.TO validate email address
function validEmailAddress(text)
{
if((document.getElementById(text).value)!="")
{
regexp=/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
if(document.getElementById(text).value.search(regexp)==-1)
{
document.getElementById(text).value="";
alert('Please Enter Valid Email Address');
document.getElementById(text).focus();
return false;
}
else
return true;
}
else
return true;
}
3.Changing password
function changePwd(newpwd,confirmpwd)
{
var newpassword=document.getElementById(newpwd).value;
var confirmpassword=document.getElementById(confirmpwd).value;
if((newpassword)!=(confirmpassword))
{
alert('New Password and Confirm Password Should be Same');
//document.getElementById(newpwd).value="";
document.getElementById(confirmpwd).value="";
document.getElementById(confirmpwd).focus();
return false;
}
else
return true;
}
4.Comparing Email Address
function CompareEmailAddress(newemail,confemail)
{
var EmailAddress=document.getElementById(newemail).value;
var confirmEmail=document.getElementById(confemail).value;
if((EmailAddress)!=(confirmEmail))
{
alert('New Email Address and Confirm Email Should be Same');
document.getElementById(newemail).value="";
document.getElementById(confemail).value="";
document.getElementById(newemail).focus();
return false;
}
else
return true;
}
5.validate password
function validatePwd() {
var invalid = " "; // Invalid character is a space
var minLength = 8; // Minimum length
var pw1 = document.getElementById("txtpword").value;
var pw2 = document.getElementById("txtcpword").value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your Password and Confirm Password.');
return false;
}
// check for minimum length
if (document.getElementById("txtpword").value.length < minLength) {
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
// check for spaces
if (document.getElementById("txtpword").value.indexOf(invalid) > -1) {
alert("Sorry, spaces are not allowed.");
return false;
}
//It must contain at least one number character
if (!(document.getElementById("txtpword").value.match(/\d/))) {
alert("passwords must include at least one number.");
return false;
}
////It must start with at least one letter
//if (!(document.getElementById("Txt_Password").value.match(/^[a-zA-Z]+/))) {
// alert("passwords must start with at least one letter.");
//return false;
//}
//It must contain at least one upper case character
if (!(document.getElementById("Txt_Password").value.match(/[A-Z]/))) {
alert("passwords must include at least one uppercase letter.");
return false;
}
//It must contain at least one lower case character
if (!(document.getElementById("txtpword").value.match(/[a-z]/))) {
alert("passwords must include one or more lowercase letters.");
return false;
}
//It must contain at least one special character
if (!(document.getElementById("Txt_Password").value.match(/\W+/))) {
alert("passwords must include at least one special character - #,@,%,!.");
return false;
}
return true;
}
6.validate phone number
function validdatephone(text)
{
var regexp=/^[0-9+]*$/;
if(text.value.search(regexp)==-1)
{
text.value = text.value.substring(0,(text.value.length-1));
alert('Special characters are not allowed');
if(text.value.search(regexp)==-1)
text.value="";
}
}
7.Making field to accept numbers only
function NumbersOnly(text)
{
if(text.value.length==0)
return;
var regexp=/^[0-9]*$/;
if(text.value.search(regexp)==-1)
{
text.value = text.value.substring(0,(text.value.length-1));
alert('Numbers Only');
}
}
8.popup question yes no
function ValidateAddFamilyMember(nextpage)
{
var answer = confirm("Would you proceed?")
if (answer){
return true;
}
else{
window.location=nextpage;
return false;
}
}
9.To select gender on Dropdown change
function genderchange(dropdown,radiolist)
{
var title = dropdown.value;
if(title=="Miss." || title=="Mrs.")
{
//alert("Female");
document.getElementById(radiolist+"_1").checked = true;
document.getElementById(radiolist+"_1").disabled=false;
document.getElementById(radiolist+"_1").parentNode.disabled=false;
document.getElementById(radiolist+"_0").disabled=true;
}
else if(title=="Mr.")
{
//alert("Male");
document.getElementById(radiolist+"_0").checked = true;
document.getElementById(radiolist+"_0").disabled=false
document.getElementById(radiolist+"_0").parentNode.disabled=false;
document.getElementById(radiolist+"_1").disabled=true;
}
else
{
//alert("Dont Know");
document.getElementById(radiolist+"_0").disabled=false
document.getElementById(radiolist+"_1").disabled=false;
document.getElementById(radiolist+"_0").parentNode.disabled=false;
document.getElementById(radiolist+"_1").parentNode.disabled=false;
}
}
10.Checking date for leap year or not(if you are using three drop down boxes)
function chkleapDate(d, m, y) {
var td = 0;
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12)
td = 31;
else if (m == 4 || m == 6 || m == 9 || m == 11)
td = 30;
else {
if (((y % 4 == 0) && (y % 100 != 0)) || (y % 400 == 0)) td = 29;
else td = 28;
}
if (td >= d) return true;
else return false;
}
function validatedate(d,m,y) {
// debugger;
if (chkleapDate(d, m, y) == false) {
alert("Invalid Date");
return false;
}
else {
return true;
}
}
function validatedate1() {
// debugger;
if (chkleapDate(document.getElementById('drp_expDay').value, document.getElementById('drp_expMonth').value, document.getElementById('drp_expYear').value) == false) {
alert("Invalid Date");
return false;
}
else {
return true;
}
}
11.This particular script will be very sue full in loyalty applications. This script is used to skip an optional page
function skippage(btnid)
{
width = 350;
height = 250;
$(document.body).append( '<div id="previewquest"><div style="text-align:center; padding-top:20px;">Do you want to skip next page?</div></div>' );
$('#previewquest').dialog({
title: "<div id='divTitle'><span style='font-weight:normal;'>next page name</span></div>",
modal:true,
width: width,
height: height,
position:'center',
resizable: false,
overlay:{
background: "black" ,
opacity: "0.3"
},
buttons:{
No: function(){
$(this).remove();
document.getElementById("hdnFamily").value="No";
//document.getElementById("btnnext").click();
document.getElementById(btnid).click();
},
Yes: function(){
$(this).remove();
document.getElementById("hdnFamily").value="Yes";
//document.getElementById("btnnext").click();
document.getElementById(btnid).click();
}},
close: function(){
$(this).remove();
}
});
}
ill explain in asp.net example keep surfing till that time
