www.webdeveloper.com
Results 1 to 3 of 3

Thread: regexp date validation issue with correcting invalid dates

  1. #1
    Join Date
    Oct 2004
    Location
    Madison, WI
    Posts
    2

    Question regexp date validation issue with correcting invalid dates

    I'm trying to use regular expressions to validate dates entered via multiple select boxes.

    The regexp I'm using (from http://www.regexplib.com ) is successfully detecting invalid dates brilliantly. The issue I'm having is that date validation continues to fail on subsequent submissions, even when the date has been corrected to be valid.

    Altering the 'day' field to be a value less than ten produces the expected behavior (passes validation).

    I've put together a small test page that replicates the problem behavior.

    Test case:

    * Submit the form with Feb. 31 (any year or time) - alert will appear and form won't be submitted
    * Alter the 'day' field to 24 - alert will appear and form won't be submitted
    * Alter the 'day' field to 8 - alert will not appear and form will be submitted

    Test markup follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Date Validation Test</title>
    <style type="text/css" media="screen">
    </style>
    <script type="text/javascript" language="javascript">

    //<![CDATA[
    function validDate(month, day, year) {
    var mmddyyyy = month + '/' + day + '/' + year;
    // alert(mmddyyyy);
    return (mmddyyyy.match(/^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((1[6-9]|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((1[6-9]|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((1[6-9]|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/)) ? true : false;

    }

    function validate(myForm) {
    var dateFields = myForm.date_fields.value.split("|");
    var errorString = '';
    var errorDate = '';

    //Validate those dates
    for (var i=0; i < dateFields.length; i++) {
    var dateparts = dateFields[i].split(",");
    var month = document.getElementById(dateparts[0]);
    var day = document.getElementById(dateparts[1])
    var year = document.getElementById(dateparts[2]);

    var month = month.options[month.selectedIndex].value;
    var day = day.options[day.selectedIndex].value;
    var year = year.options[year.selectedIndex].value;
    var title = dateparts[3] + " had an invalid date.";
    // var invalidDate = false;
    if (!validDate(month,day,year)) {
    // alert(month + day + year + " failed.");
    errorDate += title + "\n";
    }

    }

    if (errorString != '' || errorDate != '') {
    errorString = errorString.slice(0,errorString.length-2);
    errorDate = errorDate.slice(0,errorDate.length-2);
    window.alert("Please fill in the following required fields before submitting this form:\n\n"+errorString+"\n\n"+errorDate)
    return false;
    } else {
    return true;
    }
    }

    //]]>
    </script>

    </head>
    <body class="request">
    <div id="container">
    <form action="server-side_validate.php" method="post" name="request_form" id="request_form" onsubmit="return validate(this);">
    <input type="hidden" name="date_fields" id="date_fields" value="month,day,year,Test Date" />
    <fieldset>
    <label class="float">Test Date/Time:</label>
    <select name="month" id="month" tabindex="13">
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    <select name="day" id="day" tabindex="14">
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">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="year" id="year" tabindex="15">
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    </select>
    <select name="hour" id="hour" tabindex="16">
    <option value="12">12</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    </select>:
    <select name="min" id="min" tabindex="17">
    <option value="00">00</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>
    <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>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">50</option>
    <option value="51">51</option>
    <option value="52">52</option>
    <option value="53">53</option>
    <option value="54">54</option>
    <option value="55">55</option>
    <option value="56">56</option>
    <option value="57">57</option>
    <option value="58">58</option>
    <option value="59">59</option>
    </select>
    <select name="ampm" id="ampm" tabindex="18">
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    </select>
    <select name="tz" id="tz" tabindex="19">
    <option value="PST">PST</option>
    <option value="MST">MST</option>
    <option value="CST">CST</option>
    <option value="EST">EST</option>
    </select>
    </fieldset>
    <input type="submit" name="submit" value="Submit Request" tabindex="20" />
    </form>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2004
    Location
    Madison, WI
    Posts
    2
    I am dumb and just realized that I'm passing in the values in the wrong order for the regexp I've copied.

  3. #3
    Join Date
    Dec 2002
    Location
    Taiwan
    Posts
    1,297

    Re: regexp date validation issue with correcting invalid dates

    Originally posted by dimmerswitch
    var mmddyyyy = month + '/' + day + '/' + year;
    Rather than combining the three components into one string then trying to validate, you should validate each of the 3 parts separately. This would make what you're trying to do much easier. But, if you're happy with what you've got, that works too I guess...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles