Published: Thursday, February 04, 1999
Dynamic Client-Side Scripting
By Abd Shomad
Cut and paste these code on your asp pages.
I prefer to place the code on the *included file* named "jsClientUtils.inc"
These snippets code write the Client Side JavaScript Validation
for major input type validation using ASP.
e.g.: TextBox, Password, and Email Validation
Code snippets and descriptions:
Sub jsTextValidation(sName, sLabel, iMin, iMax, bRequired)
'----------------------------------------------------------------
' Purpose: Validate Text Box value.
' Inputs :
' sName : name of the input
' sLabel : label to display, if label = "" then use sName instead
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' Return : Write the Text Box Validation script to the client browser
'----------------------------------------------------------------
Sub jsPasswordValidation(sPassword1, sPassword2, iMin, iMax, bRequired)
'----------------------------------------------------------------
' Purpose: Validate Both Password field, usually used for new registration.
' Inputs :
' sPassword1 : name of the first password input box
' sPassword2 : name of the 2nd password input box
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' usually, always TRUE
' Return : Write the Password Validation script to the client browser
'----------------------------------------------------------------
Sub jsEmailValidation(sName, sLabel, iMin, iMax, bRequired)
'----------------------------------------------------------------
' Purpose: Validate e-mail input, usually used for new registration.
' Inputs :
' sName : name of the input, usually: "email"
' sLabel : label to display, if label = "" then use sName instead
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' usually, always TRUE
' Return : Write the e-mail Validation script to the client browser
'----------------------------------------------------------------
Here's the working example:
<%
'---------------------------------------------------------------------------
----
' Purpose: Display a line of text (text & vbCRLF)
'---------------------------------------------------------------------------
----
Sub Display( Text )
Response.Write(Text&vbCRLF)
End Sub
'---------------------------------------------------------------------------
----
' Purpose: Write Beginning of script tag for Form Validator Script
'---------------------------------------------------------------------------
----
Sub jsFormValidationBegin
Display "<script Language=""JavaScript"">"
Display "<!--"
Display ""
Display "function Form_Validator(theForm)"
Display "{"
Display ""
End Sub
'----------------------------------------------------------------
' Purpose: Write End of script tag for Form Validator Script
'----------------------------------------------------------------
Sub jsFormValidationEnd
Display " return (true);"
Display ""
Display "}"
Display "//-->"
Display "</script>"
End Sub
'----------------------------------------------------------------
' Purpose: Validate Text Box value.
' Inputs :
' sName : name of the input
' sLabel : label to display, if label = "" then use sName instead
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' Return : Write the Text Box Validation script to the client browser
'----------------------------------------------------------------
Sub jsTextValidation(sName, sLabel, iMin, iMax, bRequired)
Display " // Validation script for field '"&sName&"' ("&sLabel&")"
If bRequired Then
Display " if (theForm."&sName&".value == """")"
Display " {"
Display " alert(""Please enter a value for the \"""&sLabel&"\"" field."");"
Display " theForm."&sName&".focus();"
Display " return (false);"
Display " }"
Display ""
Else
Display " if (theForm."&sName&".value != """")"
Display " {"
Display " // if user type the value then Check the value"
End If
Display " if (theForm."&sName&".value.length < "&iMin&")"
Display " {"
Display " alert(""Please enter at least "&iMin&" characters in the \"""&sLabel&"\"" field."");"
Display " theForm."&sName&".focus();"
Display " return (false);"
Display " }"
Display ""
Display " if (theForm."&sName&".value.length > "&iMax&")"
Display " {"
Display " alert(""Please enter at most "&iMax&" characters in the \"""&sLabel&"\"" field."");"
Display " theForm."&sName&".focus();"
Display " return (false);"
Display " }"
Display ""
If not bRequired Then
Display " // End checking value"
Display " }"
Display ""
End If
End Sub
'----------------------------------------------------------------
' Purpose: Validate Both Password field, usually used for new registration.
' Inputs :
' sPassword1 : name of the first password input box
' sPassword2 : name of the 2nd password input box
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' usually, always TRUE
' Return : Write the Password Validation script to the client browser
'----------------------------------------------------------------
Sub jsPasswordValidation(sPassword1, sPassword2, iMin, iMax, bRequired)
Display " // Passsword field validation"
jsTextValidation sPassword1, "Password", iMin, iMax, bRequired
jsTextValidation sPassword2, "Verify Password", iMin, iMax, bRequired
Display " if (theForm."&sPassword1&".value != theForm."&sPassword2&".value)"
Display " {"
Display " alert(""Both \""Password\"" field must has the same value."");"
Display " theForm."&sPassword2&".value = """";"
Display " theForm."&sPassword2&".focus();"
Display " return (false);"
Display " }"
Display ""
End Sub
'----------------------------------------------------------------
' Purpose: Validate e-mail input, usually used for new registration.
' Inputs :
' sName : name of the input, usually: "email"
' sLabel : label to display, if label = "" then use sName instead
' iMin, iMax: Minimum & Maximum characters allowed respectively
' bRequired : True/False, is required value?
' usually, always TRUE
' Return : Write the e-mail Validation script to the client browser
'----------------------------------------------------------------
Sub jsEmailValidation(sName, sLabel, iMin, iMax, bRequired)
Display " // Email field validation"
jsTextValidation sName, sLabel, iMin, iMax, bRequired
If Not bRequired Then
Display " if (theForm."&sName&".value != """")"
Display " {"
Display " // if user type the value then Check the value"
End If
Display " if (theForm."&sName&".value.indexOf(""@"",1) == -1)"
Display " {"
Display " alert(""Not a valid e-mail address."");"
Display " theForm."&sName&".focus();"
Display " return (false);"
Display " }"
Display ""
Display " if (theForm."&sName&".value.indexOf(""."",theForm."&sName&".value.indexOf(""@"")+1) == -1)"
Display " {"
Display " alert(""Not a valid e-mail address."");"
Display " theForm."&sName&".focus();"
Display " return (false);"
Display " }"
Display ""
If not bRequired Then
Display " // End checking e-mail value"
Display " }"
Display ""
End If
End Sub
%>
Just copy and paste all the text to your asp pages.
<HTML>
<HEAD>
<%
jsFormValidationBegin
jsTextValidation "name", "Full Name", 3, 50, True
jsPasswordValidation "passw1", "passw2", 3, 20, True
jsEmailValidation "email", "E-mail", 3, 50, False
jsFormValidationEnd
%>
</HEAD>
<BODY>
<FORM ACTION="-- self --" METHOD="POST" onsubmit="return
Form_Validator(this)"
name="formRegistration">
Full Name:
<INPUT TYPE="TEXT" NAME="name" SIZE=20 MAXLENGTH=50>
<SUP> *)
</SUP><BR>
Password :
<INPUT TYPE="PASSWORD" NAME="passw1" SIZE=20 MAXLENGTH=20>
<SUP>
*) </SUP><BR>
Retype Password:
<INPUT TYPE="PASSWORD" NAME="passw2" SIZE=20 MAXLENGTH=20>
<SUP> *) </SUP><BR>
Email :
<INPUT TYPE="TEXT" NAME="email" SIZE=20 MAXLENGTH=50>
<BR>
<INPUT TYPE="SUBMIT" NAME="s" VALUE=" Submit ">
<BR>
Note: *) is required field.
</FORM>
</BODY>
</HTML>
