Question

Working on a validation script for a clients site. Each function works correctly individually, but when I call them all from one function, the page still submits. Here is my code:

    <script type="text/javascript">

    function validateForm() {
      checkDate();
      checkRemainingFields();
      checkPhone();
    }

    /**--------------------------
    //* Validate Date Field script- By JavaScriptKit.com
    //* For this script and 100s more, visit http://www.javascriptkit.com
    //* This notice must stay intact for usage
    ---------------------------**/

    function checkDate(){
      var input=document.forms[0].eventdate;
      var validformat=/^\d{2}\/\d{2}\/\d{4}$/; //Basic check for format validity

      if (!validformat.test(input.value)) {
        alert("Invalid Day, Month, or Year range detected. Proper format is MM/DD/YYYY, please correct and submit again.")
        return false;
      } else{  //Detailed check for valid date ranges
      var monthfield=input.value.split("/")[0];
      var dayfield=input.value.split("/")[1];
      var yearfield=input.value.split("/")[2];
      var dayobj = new Date(yearfield, monthfield-1, dayfield);
    }

    if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield)) {
      alert("Invalid Day, Month, or Year range detected. Proper format is MM/DD/YYYY, please correct and submit again.")
      return false;
      } else return true;
    }

    function checkRemainingFields() {
      var theme=document.forms[0].theme;
      var text=document.forms[0].text;
      var name=document.forms[0].contactperson;

      if (theme.value.length==0) {
        alert("Invalid theme value.  Please correct the theme field to continue.");
        return false;
      } else if (text.value.length==0) {
        alert("Invalid description value. Please correct the desciption field to continue.");
        return false;
      } else if (name.value.length==0) {
        alert("Invalid name value.  Please correct the name field to continue.");
        return false;
      } else return true;
    }

    function checkPhone() {
      var input=document.forms[0].contactphone;
      var validformat=/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      var ext=document.forms[0].extension;

      if (!validformat.test(input.value)) {
        alert("Invalid phone number detected. The proper format is 555-555-5555. Please correct and submit again.");
        return false;
      } else if (ext.value.length != 3){ //Check extension
        alert("Invalid extension.  Please type your 3 digit extension.");
        return false;
      } else return true;
    }

    </script>

validateForm() is called with an onsubmit from a form later on the page. I am not sure if I wrote the calls correctly. When the form is submitted, it goes through all of the checks and displays the alerts for each, but the page continues on to the php processing page. I need a bit of help.

Answer 1

Try something like:

function validateForm() {
    return checkDate() && checkRemainingFields() && checkPhone();
}

You need to return false when any of those functions returns false, otherwise return true.

An equivalent, though more verbose way is:

function validateForm() {
    if (!checkDate()) return false;
    if (!checkRemainingFields()) return false;
    if (!checkPhone()) return false;
    return true;
}