We have already discussed about setting machine generated mails up on user registration. Now think about setting constraints on the registration form. We mainly use JavaScript for that purpose. If the user forgot to enter first name in the registration form, we can prompt him regarding that.
Different types of constraints can be done on the registration form fields. To check whether first name or second name is not filled, we need to check whether it is blank or not. Following lines of code can be used for that,
var x=document.forms["myForm"]["fname"].value
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
myForm is the form name and fname is the name of textbox for first name. ["myForm"]["fname"].value is used for getting the value from textbox named fname from the form myForm. In the case of checking a radio button, codes are different. In the case of Gender, we need to check whether the radio buttons are checked or not.
for (var i=0; i < document.myForm.gender.length; i++)
{
if (document.myForm.gender[i].checked)
{
x = document.myForm.gender[i].value;
}
}
if (x!='male' && x!='female')
{
alert("Gender must be selected");
return false;
}
The above code is used for checking the radio buttons. The first if condition is used for getting the value from the radio buttons. Next if condition is used for checking whether it is not male/female.
Now we can check whether the entered mail id is of a valid format. Mail id with a format abc@xyz.com will be accepted. Otherwise the user need will be prompted about invalid mail id.
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
Check the above code. It will check whether ‘@’ comes at the beginning or ‘.’ comes atleast 2 letters after ‘@’ or the mailed ends at 2 letter after the ’.’
Now let’s check the password field. We have to check 3 conditions here. First one is to check whether password is entered or not. Second one is to check Password has atleast 8 characters. Then we have to check the entered password and confirm password fields match with one another.
var x=document.forms["myForm"]["pswd1"].value
var y=document.forms["myForm"]["pswd2"].value
if (x==null || x=="")
{
alert("Password must be filled out");
return false;
}
if (x.length<8)
{
alert("Password must be of atleast 8 characters");
return false;
}
if (x!=y)
{
alert("Passwords doesn't match");
return false;
}
I think there is no need to explain these codes. Now let’s think about a valid date. There are lots of conditions that must be filled out to get a valid date. Date must be entered. Date must not exceed their higher values. Leap years must be checked.
var x=document.forms["myForm"]["dd"].value
var y=document.forms["myForm"]["mm"].value
var z=document.forms["myForm"]["yyyy"].value
if(x<1 || x>31)
{
alert("Not a valid date");
return false;
}
if(y<1 || y>12)
{
alert("Not a valid Month");
return false;
}
if(z<1940 || z>2005)
{
alert("Not a valid year range");
return false;
}
First checks whether the entered dates exceeds the common limits. After entering dd, mm and yyyy values, we need to check the following constraints also.
if(z%400 ==0 || (z%100 != 0 && z%4 == 0))
{
leap=1;
}
else
{
leap=0;
}
if(leap==1 && y==2)
{
if(x<1 || x>29)
{
alert("Not a valid date");
return false
}
}
if(leap==0 && y==2)
{
if(x<1 || x>28)
{
alert("Not a valid date");
return false;
}
}
The above codes check the leap year conditions. The code given below checks the months with 30 days and 31 days,
if(y==1 || y==3 || y==5 || y==7 || y==8 || y==10 || y==12 )
{
if(x<1 || x>31)
{
alert("Not a valid date");
return false;
}
}
if(y==4 || y==6 || y==9 || y==11 )
{
if(x<1 || x>30)
{
alert("Not a valid date");
return false;
}
}
That’s all about the JavaSript codes used. The entire JavaScript is written inside a function called validateForm(). Just have a look at the form tag in the html code.
<form name="myForm" onsubmit="return validateForm()" method="POST">
Don’t forget to add the JavaScript function name in the onsubmit attribute of form.
Hope you got a overall idea about the registration form constraints.
Thanks
AJAY
No comments:
Post a Comment
Comments with advertisement links will not be published. Thank you.