Validation code

View Answers

November 28, 2008 at 3:44 AM

Hi friend,

code to solve the problem :

<script language="javascript" type="text/javascript">
function validateZIP() {
var val = document.passform.password.value;
if(!isAlphabetic(val))
{
alert("Please enter valid character [a-z][A-Z].");
document.passform.password.focus();
return false;
}
return true;

}

function isAlphabetic(val)
{
if (val.match(/^[a-zA-Z]+$/))
{
return true;
}
else
{
return false;
}
}

</script>
<form name="passform" onSubmit="return validateZIP();">
Password: <input type="password" size=30 name="password">
<input type=submit value="Submit">
</form>

For more information on Javascript visit to :

http://www.roseindia.net/javascript/

Thanks

December 1, 2008 at 11:21 PM

calendar.html
*************

<html>
<head>
<title>Java Script Calender Date Picker</title>
<meta http-equiv="Content-Type" content="text/html;">
<script language="javaScript"
type="text/javascript" src="calendar.js"></script>
<link href="calendar.css" rel="stylesheet" type="text/css">
<script>
function isNumberKey(value)
{
//alert('alok_pass1');
var charCode = value.which ? (value.which) : event.keyCode
if (charCode > 31 && (charCode < 47 || charCode > 57))
return false;
}
function Validate()
{
//alert('Inside Function');
//alert('check empty' :+((document.getElementById("txtFromDate").value)!=""));
//if ((trim(document.getElementById("txtFromDate").value)!="") && (trim(document.getElementById("txtToDate").value) !=""))
//{
var strFromDate = document.getElementById("txtFromDate").value;
//alert('FROM_DATE-1 :'+strFromDate );
var dayPartFromDate = parseInt(strFromDate.substring(0,2),10);
var monPartFromDate = parseInt(strFromDate.substring(3,5),10);
var yearPartFromDate = parseInt(strFromDate.substring(6,10),10);
var dtFrom = new Date(yearPartFromDate, monPartFromDate-1, dayPartFromDate);

var strToDate = document.getElementById("txtToDate").value;
var dayPartToDate = parseInt(strToDate.substring(0,2),10);
var monPartToDate = parseInt(strToDate.substring(3,5),10);
var yearPartToDate = parseInt(strToDate.substring(6,10),10);
var dtTo = new Date(yearPartToDate, monPartToDate-1, dayPartToDate);

//alert('dtFrom :'+dtFrom );
//alert('dtTo :'+dtTo );

if(dtFrom > dtTo)
{
alert("From Date must be less than To Date");
return false;
}
}
//}

</script>
</head>
<body>
<form>
From_Date : <input type="text" name="txtFromDate"><a href="#"
onClick="setYears(1947, 2008);
showCalender(this, 'txtFromDate');">
<img src="calender.png"></a>

To_Date : <input type="text" name="txtToDate"><a href="#"
onClick="setYears(1947, 2008);
showCalender(this, 'txtToDate');">
<img src="calendar.jpeg"></a>

<input type="button" onclick="Validate()" value="Compare 2 Dates">

</form>



<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(
createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));"
id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));"
id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();">
<font color="#003333" size="+1">X</font>
</a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>



</body>
</html>

December 1, 2008 at 11:22 PM

calendar.html
****************
<html>
<head>
<title>Java Script Calender Date Picker</title>
<meta http-equiv="Content-Type" content="text/html;">
<script language="javaScript"
type="text/javascript" src="calendar.js"></script>
<link href="calendar.css" rel="stylesheet" type="text/css">
<script>
function isNumberKey(value)
{
//alert('alok_pass1');
var charCode = value.which ? (value.which) : event.keyCode
if (charCode > 31 && (charCode < 47 || charCode > 57))
return false;
}
function Validate()
{
//alert('Inside Function');
//alert('check empty' :+((document.getElementById("txtFromDate").value)!=""));
//if ((trim(document.getElementById("txtFromDate").value)!="") && (trim(document.getElementById("txtToDate").value) !=""))
//{
var strFromDate = document.getElementById("txtFromDate").value;
//alert('FROM_DATE-1 :'+strFromDate );
var dayPartFromDate = parseInt(strFromDate.substring(0,2),10);
var monPartFromDate = parseInt(strFromDate.substring(3,5),10);
var yearPartFromDate = parseInt(strFromDate.substring(6,10),10);
var dtFrom = new Date(yearPartFromDate, monPartFromDate-1, dayPartFromDate);

var strToDate = document.getElementById("txtToDate").value;
var dayPartToDate = parseInt(strToDate.substring(0,2),10);
var monPartToDate = parseInt(strToDate.substring(3,5),10);
var yearPartToDate = parseInt(strToDate.substring(6,10),10);
var dtTo = new Date(yearPartToDate, monPartToDate-1, dayPartToDate);

//alert('dtFrom :'+dtFrom );
//alert('dtTo :'+dtTo );

if(dtFrom > dtTo)
{
alert("From Date must be less than To Date");
return false;
}
}
//}

</script>
</head>
<body>
<form>
From_Date : <input type="text" name="txtFromDate"><a href="#"
onClick="setYears(1947, 2008);
showCalender(this, 'txtFromDate');">
<img src="calender.png"></a>

To_Date : <input type="text" name="txtToDate"><a href="#"
onClick="setYears(1947, 2008);
showCalender(this, 'txtToDate');">
<img src="calendar.jpeg"></a>

<input type="button" onclick="Validate()" value="Compare 2 Dates">

</form>



<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(
createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));"
id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));"
id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();">
<font color="#003333" size="+1">X</font>
</a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>



</body>
</html>

calender.js
*****************
**************
// Array of max days in month in a year and in a leap year
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];

function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) +
(((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}

function getDaysPerMonth(month, year)
{
/*
Check for leap year. These are some conditions
to check year is leap year or not...
1.Years evenly divisible by four are normally
leap years, except for...
2.Years also evenly divisible by 100 are not
leap years, except for...
3.Years also evenly divisible by 400 are
leap years. */
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];

return monthMaxDaysLeap[month];
}
else
return monthMaxDays[month];
}

function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)

// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear;
var month = curMonth;
}

var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length;
i++)
{
if (document.getElementById('selectYear').options[i].value
== year)
{
document.getElementById('selectYear').selectedIndex =
i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;

// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();

continu = true;
firstRow = true;
var x = 0;
var d = 0;
var trs = []
var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild(document.createElement
("TD"));
x++;
}
}
firstRow = false;
var d = 1;
}
if (x % 7 == 0)
{
ti++;
trs[ti] = document.createElement("TR");
}
if (day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false;
var styleClass = 'normalDay';
var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass;
if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
if (targetEl)
td.onclick = new Function(
'pickDate('+year+', '+month+', '+d+')'
);
else
td.style.cursor = 'default';
td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td);
x++;
d++;
}
return trs;
}

function showCalender(elPos, tgtEl)
{
targetEl = false;

if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');

var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';

calTable.style.display='block';

var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0)
m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0)
m[2] = m[2].substr(1, 1);
m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}

hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy)
startYear = curYear;
if (ey)
endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100)
{
return;
}

var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions); // nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;

if (
(
// check if it overlaps horizontally
(thisLeft >= calLeft && thisLeft <= calRight)
||
(thisRight <= calRight && thisRight >= calLeft)
||
(thisLeft <= calLeft && thisRight >= calRight)
)
&&
(
// check if it overlaps vertically
(thisTop >= calTop && thisTop <= calBottom)
||
(thisBottom <= calBottom && thisBottom >= calTop)
||
(thisTop <= calTop && thisBottom >= calBottom)
)
)
{
hideSelectTags[hideSelectTags.length] = thisTag;
thisTag.style.display = 'none';
}
}

}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
el.className = 'hlDay';
}
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay')
el.className = 'toDay';
else if (el.id == 'calenderChoosenDay')
el.className = 'choosenDay';
else
el.className = 'normalDay';
}
function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= day+'-'+month+'-'+year;
closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft;
positions[1] += el.offsetTop;
if (el.offsetParent)
positions = getParentOffset(el.offsetParent, positions);
return positions;
}