/    Sign up×
Community /Pin to ProfileBookmark

regexp date validation issue with correcting invalid dates

Copy linkTweet thisAlerts:
Oct 31.2004

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

The regexp I’m using (from [url]http://www.regexplib.com[/url] ) 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]|1d|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:nn”+errorString+”nn”+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>

    to post a comment
    JavaScript

    2 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @dimmerswitchauthorOct 31.2004 — I am dumb and just realized that I'm passing in the values in the wrong order for the regexp I've copied.
    Copy linkTweet thisAlerts:
    @ExuroOct 31.2004 — [i]Originally posted by dimmerswitch [/i]

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

    Success!

    Help @dimmerswitch spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...