How to fix this so form it won't submit with invalid date?

Discussion in 'JavaScript' started by wpprod, Jan 29, 2015.

  1. #1
    This page submits (click on submit 2 or 3 times) even though there is invalid data. I've been playing with it for 2 days now. :( Any help will be appreciated. Thanks!
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    
    <!-- #BeginEditable "doctitle" -->
    <title></title>
    <!-- #EndEditable -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="../shared/site-style.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    
    
    <script Language="JavaScript" Type="text/javascript">
    <!--
    
    
    function ValidateDate() {
    
        var nospace = /^\s*/;
        var datemsg = "";
    
        var inputDate = document.BuyerRequirementsForm.NeededBy.value;
        inputDate = inputDate.replace(nospace, "");
        document.BuyerRequirementsForm.NeededBy.value = inputDate;
        datemsg = isValidDate(inputDate);
            if (datemsg != "") {
                alert(datemsg);
                return;
            }
            else {
        //Process your form
            }
    
    }
    
    function isValidDate(dateStr) {
    
    
        var msg = "";
        // Checks for the following valid date formats:
        // MM/DD/YY   MM/DD/YYYY   MM-DD-YY   MM-DD-YYYY
        // Also separates date into month, day, and year variables
    
        // To require a 2 & 4 digit year entry, use this line instead:
        //var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/;
        // To require a 4 digit year entry, use this line instead:
        var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
    
        var matchArray = dateStr.match(datePat); // is the format ok?
        if (matchArray == null) {
            document.getElementById("dateError").innerHTML = "Date is not in a valid format:";
            document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
    
        }
    
    
        month = matchArray[1]; // parse date into variables
        day = matchArray[3];
        year = matchArray[4];
    
        if (year < 2000 || year > 2099) { // check year range
            document.getElementById("dateError").innerHTML = "yyyy must begin with 20:";
            document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
    
        }
    
        if (month < 1 || month > 12) { // check month range
            document.getElementById("dateError").innerHTML = "Month must be between 1 and 12:";
            document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
    
        }
    
        if (day < 1 || day > 31) {
            document.getElementById("dateError").innerHTML = "Day must be between 1 and 31:";
            document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
        }
    
        if ((month==4 || month==6 || month==9 || month==11) && day==31) {
                document.getElementById("dateError").innerHTML = "Month "+month+" doesn't have 31 days!";
                document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
        }
    
        if (month == 2) { // check for february 29th
        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
        if (day>29 || (day==29 && !isleap)) {
            document.getElementById("dateError").innerHTML = "February " + year + " doesn't have " + day + " days!";
            document.getElementById('dateError').style.display = "inline";
             document.getElementById('dateError').scrollIntoView();
              return false;
    
            } else {
    
            document.getElementById('dateError').style.display = "none";
    
        }
        }
    
        if (day.charAt(0) == '0') day= day.charAt(1);
    
        //CCYYMMDD format
        //msg = (parseInt(year,10) * 10000) + (parseInt(month,10) * 100) + parseInt(day,10);
    
        return msg;  // date is valid
    
    }
    //--></script>
    
    <form METHOD="POST" ACTION="buyer-requirements-add.asp" name="BuyerRequirementsForm" onsubmit="return ValidateInLine()" language="JavaScript" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt;">
    
    <br>
    
    
    <div  style="margin-left: 20px" class="inlineErrrorMsg" id="dateError"></div>
    <p>
    <b>
    * Date Needed By:</b>&nbsp; &nbsp;
    
    <INPUT type="text" NAME="NeededBy" ID="NeededBy" SIZE=8 MAXLENGTH=15 value="<%=Date%>" onblur="ValidateDate()">&nbsp;
    (mm/dd/yyyy)
    </P>
    
    
    
    
    <P style="margin-left: 280px;">
    <BR>
    
      <INPUT onkeypress="return check(event)" TYPE="submit" value="Submit">
      <INPUT onkeypress="return check(event)" onClick="window.location.reload()" TYPE="Reset"></p>
    <INPUT onkeypress="return check(event)"type="hidden" name="EntryDate" value="<%=(Now)%>"> </p>
    </form>
    
    <script>
    function ValidateInLine() {
    ValidateDate("NeededBy", "dateError");
    
    return (ValidateDate("NeededBy", "dateError")
    
            );
    }
    
    
    
    </script>
    
    
    </body>
    
    </html>
    Code (markup):

     
    Last edited: Jan 29, 2015
    wpprod, Jan 29, 2015 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    It looks to me that you forgot to complete the coding for ValidateDate() function.
    Validation chain: form <--> ValidateInLine() <--> ValidateDate() <--> isValidDate().

    Also, I think the language="JavaScript" attribute is irrelevant to form element?

    Hendra
     
    hdewantara, Jan 30, 2015 IP
  3. wpprod

    wpprod Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3

    Trying different configurations and still not getting it to work.
     
    wpprod, Jan 30, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    I haven't had that close a look at the code, but are you preventing the actual form-submission anywhere? Regardless of whether or not a script has a js-attribute connected, if you click on a submit-button, the form will be submitted - unless you prevent it from being submittet via javascript also. Too tired to have a look at the code again, but if you're not preventing it specifically, I would try that.
     
    PoPSiCLe, Jan 30, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Which you should never rely on in the first place since some people browse with scripting disabled AND hackers will just BS their own fakery into anyways.

    I'd be putting a random hash into the form, and checking it against a value stored in a session, invalidating the session copy when it's submitted the first time. That way you can reject re-sends of the same form and values SERVER SIDE.

    Might also help if you had a well formed form instead of inaccessible invalid 1990's style markup... and keep in mind the most basic rule of scripting: If you can't make the page work without JavaScript FIRST, you likely have no business adding scripting to it!

    Basically you should be thinking how to handle a re-submit of the same form on the server, NOT preventing it on the client because client side prevention is a unreliable at best, a nonexistent pipe-dream at worst!
     
    deathshadow, Jan 30, 2015 IP