Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
 New Feature: Community Sites:
Create your own .NET community website and start earning from Google AdSense !
It's Free !
|
How to do validation using java script
|
The following code sample shows how to do validation using java script
***********Block Numbers - JavaScript****************
function onKeyPressBlockNumbers(e)
{
var key = window.event ? e.keyCode : e.which;
var keychar = String.fromCharCode(key);
reg = /\d/;
return !reg.test(keychar);
}
Block Numbers - HTML
<form>
<input type="text" onkeypress="return onKeyPressBlockNumbers(event);" />
</form>
=====================================================================================
****************Only Numeric*************************
Add this JavaScript:
<script language=javascript>
function isNumericKeyStroke()
{
var returnValue = false;
var keyCode = (window.event.which) ? window.event.which : window.event.keyCode;
if ( ((keyCode >= 48) && (keyCode <= 57)) || // All numerics
(keyCode == 8) || // Backspace
(keyCode == 13) ) // Carriage Return
returnValue = true;
if ( window.event.returnValue )
window.event.returnValue = returnValue;
return returnValue;
}
</script>
Add the handler to the TextBox:
TextBox1.Attributes.Add("onkeydown", "JavaScript:return isNumericKeyStroke();");
===================================================================================
Using the onkeypress event, we could create on-the-fly form validation. Now that's something CGI most certainly can't do. The idea is to use the onkeypress event handler inside the form field to check, so as the user types, it is being validated concurrently.
Numbers only
Here's an example that limits a form field to contain only numeric input (on the fly, of course!).
<script type="text/javascript">
function numbersonly(e){
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false //disable key press
}
}
</script>
<form>
<input type="text" size=18 onkeypress="return numbersonly(event)">
</form>
Try typing in stuff other than numbers into the above box- you can't. How does the script work? By checking to see whether the keycode of the key pressed as the user types falls within the range of the number keys (48~57), and if not, returns false, which disables the keypress action. How did I know 48 to 57 represents the keycode of the numeric keys? Well, by using a simple alert(event.keycode) script to map it out (no fancy tricks here). Then, by using the "onkeypress" event handler, along with function numbersonly() inside the textbox to validate, we have one picky box!
Limit number of characters allowed
<script type="text/javascript">
function limitlength(obj, length){
var maxlength=length
if (obj.value.length>maxlength)
obj.value=obj.value.substring(0, maxlength)
}
</script>
Enter text (max length is 20 characters):
<form>
<textarea onkeyup="return limitlength(this, 20)" style="width: 300px; height: 90px"></textarea>
</form>Enter text (max length is 20 characters):
====================================================================================
***********************Email Validation************************
<script language = "Javascript">
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail ID")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(" ")!=-1){
alert("Invalid E-mail ID")
return false
}
return true
}
function ValidateForm(){
var emailID=document.frmSample.txtEmail
if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter your Email ID")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script
===
<form name="frmSample" method="post" action="#" onSubmit="return ValidateForm()">
<p>Enter an Email Address :
<input type="text" name="txtEmail">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
===========================================================================================
*******************Date validation(mm/dd/yyyy)***************************
<script language = "Javascript">
/**
* DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/
// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag){
var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
function daysInFebruary (year){
// February has 29 days in any year evenly divisible by four,
// EXCEPT for centurial years which are not also divisible by 400.
return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 31
if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
if (i==2) {this[i] = 29}
}
return this
}
function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strMonth=dtStr.substring(0,pos1)
var strDay=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr=strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("The date format should be : mm/dd/yyyy")
return false
}
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month")
return false
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day")
return false
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
return false
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
alert("Please enter a valid date")
return false
}
return true
}
function ValidateForm(){
var dt=document.frmSample.txtDate
if (isDate(dt.value)==false){
dt.focus()
return false
}
return true
}
</script>
===
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
<p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font>
:
<input type="text" name="txtDate" maxlength="10" size="15">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
==================================================================================
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|