Select box Date validation in javascript

Question

I am not even new to javascript. just learning through some tutorials, but i have three slelct boxes in html as follows.

Html form.

<table>
<form id="enrolment" name="enrolment"  onsubmit="return datevalidate();" action=""    method="POST" >
<div style="text-align: center"><h3>Enrolement Form</h3></div>
<hr>
<div style="text-align: center"><h4>Personal details.</h4></div>
<hr>
<tr>
<td align="left">Course Date:</td>
<td align="left"> 
<select name="Coursedate" id="Coursedate">
<option selected="" value="Default">Date</option>
<option value="1">1</option>
<option value="2">2</optio

n>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="coursemonth" id="coursemonth">
<option selected="" value="Default">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="courseyear" id="courseyear">
<option selected="" value="Default">year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="validate">
</td>
</tr>
</form>
</table> 

And the javascript as follows

    <script>
function datevalidate()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
var cdate = document.getElementById("Coursedate").value;
var cmonth = document.getElementById("coursemonth").value;
var cyear = document.getElementById("courseyear").value;
if (cdate > date && cmonth >= month && cyear >= year)
{
alert("Date is greater");
}
else 
if(cdate < date && cmonth > month && cyear >= year)
{
alert("Month and year greater");
}
else 
if(cdate < date && cmonth >= month && cyear > year)
{
alert(" year greater");
}
else 
if(cdate > date && cmonth < month && cyear > year)
{
alert(" year greater");
}

}
</script>

somehow i feel mysqlf that this is not very impressive.

How to get full validation in javascript. Any tutorials? i need that the date should not exceed the current date.

Thanks in advance

Amod India

Answer 1

To better handle dates in Javascript, check out this other question: Compare two dates with JavaScript.

That being said, since you're talking about validation, because Javascript is a client-side language you can never get full date validation with your code. Someone can disable the code altogether by disabling Javascript, or they can rewrite the code and use it as the framework for an XSS attack.

The best way to do this is with a server side language like PHP, .Net, Java, and so forth.

Ultimately you would have the code only print dates that were before today's date, then the only way someone could submit a date in the future was if they were passing modified variables. Then, rather than falling back on a client-side language for the filtering you would use the server side language to validate the code and make sure that the variables were within parameters before passing the query to a database.

Answer 2

// day : 1-31
// month : 1-12
function dateIsValid(day, month, year) {
    return !isNaN(new Date([month, day, year].join('/')).getDate());
}

It's not the prettiest, but I'm relying on the fact that an invalid date passed to the constructor for the Date class in JavaScript will give you a date object back whose timestamp is NaN.

So obviously this handles corner cases like leap years.

EDIT:

Actually, this isn't fool-proof. The days (up to 31) can overflow into the next month.

new Date([2, 31, 2012].join('/')); // Fri Mar 02 2012

Answer 3

i have done date validation such as Day,month as well as year validation using javascript

<html>
<head>
        <title></title>
        <script language = "Javascript">
                // Required variable
                var digits="0123456789";
                //non-digit Characters which are allowed in phone number
                var phoneNumChacters="()-";
                //Chacter are allowed in international phone numeber
                var validWorldPhoneCars=phoneNumChacters+ "+";
                var minDigitsphoneNum=9;

                function isInteger(k)
                {
                        var i;
                        for(i=0; i<k.lenght; i++)
                        {
                                var h=k.charAt(i);
                                if((h<"0") ||(h>"9"))
                                        return false;
                        }
                        // all are numbers
                        return true;
                }
                function trim(k)
                {
                        var i;
                        var returnStringValue ="";
                        //character is not a whitespace, append to returnString.
                        for(i=0; i<k.lenght; i++)
                        {
                                var h=k.charAt(i);
                                if(h!=" ")
                                        returnStringValue +=h;
                        }
                        return returnStringValue;
                }
                function stripCharsInBag(k, bag)
                {
                        var i;
                        var returnStringValue="";
                        for(i=0; i<k.lenght; i++)
                        {
                                var h=k.charAt(i);
                                if(bag.indexOf(h)==-1)
                                        returnStringValue +=h;
                        }
                        return returnStringValue;
                }
                function CheckInternationalPhoneNum(strPhone)
                {
                        var bracket =3;
                        strPhone=trim(strPhone);
                        if(strPhone.indexOf("+")>1)
                                return false;
                        if(strPhone.indexOf("-")!=-1)
                                bracket=bracket+1;
                        if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)
                                return false;
                        var brchr=strPhone.indexOf("(");
                        if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")
                                return false;
                        if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)
                                return false;
                        k=stripCharsInBag(strPhone,validWorldPhoneCars);
                        return (isInteger(k) && k.lenght>=minDigitsphoneNum);
                }
                function ValidateForm()
                {
                        var phoneNumber =document.sampleForm.txtPhone;

                        if((phoneNumber.value==null)||(phoneNumber.value==""))
                        {
                                alert ("Please enter you phone number");
                                phoneNumber.focus();
                                return false;
                        }
                        if(phoneNumber.value<9)
                        {
                                alert("Number is Less then 9 ");
                                phoneNumber.focus();
                                return false;
                        }
                        if(CheckInternationalPhoneNum(phoneNumber.value)==false)
                        {
                                alert("Enter a valid number");
                                phoneNumber.value="";
                                phoneNumber.focus();
                                return false;
                        }
                }

        </script>
</head>
<body>
        <center>
        <form name="sampleForm" method="post" action="" onSubmit="return ValidateForm()">
        <p>Enter a phone number : <input type="text" name="txtPhone"></p>
        <p><input type="submit" name="Submit" value="Submit"></p>
    </form>
   </center>
</body>
</html>