Friday, July 6, 2012

Date and Textarea validation using JavaScripy in HTML

<html>
<title>Event Creation in MULTIPLEX AUTOMATION SYSTEM</title>
<head>
<script language = "Javascript">
/**
 * DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/datevalidation.asp)
 */
// 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.f1.date;
   
    valid=true;

if(document.f1.n1.value=="")

{
        alert("Name cannot be Null!");

valid=false;
}
else if(document.f1.desc.value=="")

{
        alert("Please provide Description for the event!");
   
valid=false;
}
else if(isDate(dt.value)==false){
        dt.focus();
        valid=false;
    }

    return valid;
 }

</script>

</head>
<body bgcolor="Oldlace">
<center><h1>Event Creation in Multiplex Automation System </h1>
<hr>

<form name="f1" action="createsuccess.html" method="post" onSubmit="return ValidateForm()">

<fieldset>
    <legend align="right">Event Creation</legend>

<center>
<table border="0">

<tr>
<td>Event Name:</td>
<td>
<input type="text" name="n1" />
</td>
</tr>
<tr>
<td>Event Time </td>
<td>
<input type="text" name="date" />
</td>
<tr>
<td>Description:</td>

<td>

<textarea name="desc" rows=10 cols=40> </textarea>
</td>
</tr>



<tr><td><input type="submit" value="Create" size=50 /></td>
<td><input type="reset" value="Reset" size=50/></td>
</table>
</fieldset>



</table>
</form>

<marquee><img src="advt1.png"/></marquee>
</body>
</html>

No comments:

Post a Comment