window.onload method, how to call multiple functions

Question

Writing some JavaScript so the form does not submit in less the fields have been filled out, and if the user has not, a message pops up saying 'please fill out the name field' or 'please fill out the email field' etc. I am writing a separate function for each field (don't know if that is the right way) and when I add each function to the window.onload, it only pops up with one of the messages. Any advice would be great.

HTML

 <form id="frmContact" name="frmContact" method="post" action="thanks.htm">
    <fieldset id="quickSupport">
      <legend><strong>Quick Support</strong></legend>
      <p> If your request isn't urgent, drop us a quick line and we'll get back to you within 24 hours </p>
      <p>
        <label for="name">Name:</label>
        <input type="text" value="Your Name" name="name" id="name" tabindex="10" />
      </p>
      <p>
        <label for="email">Email:</label>
        <input type="text" value="Your Email" name="email" id="email" tabindex="20" />
      </p>
        <label for="comments">Comments </label>
        <br />
        <textarea name="comments" value="Message" id="comments" cols="45" rows="5" tabindex="60" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Message</textarea>
      </p>
      <p>
        <input type="submit" name="submit" id="submit" value="Send" tabindex="70" />
      </p>
    </fieldset>
  </form>

   <p><span id="errorMessage"></span></p>
   <p><span id="errorMessage1"></span></p>

JavaScript

function prepareEventHandlers () {
document.getElementById("frmContact").addEventListener("submit", function(event) {

        // Show message
        if (document.getElementById("email").value == "Your Email") {
            document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";
            // to STOP the form from submitting
            return false;
        } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage").innerHTML = "";
            return true;
        }

        event.preventDefault(); // Prevent form from submitting
    }
});
}

function prepareEventHandlersName () {
document.getElementById("frmContact").addEventListener("submit",         function(event) {

        // Show message
        if (document.getElementById("name").value == "Your Name") {
            document.getElementById("errorMessage1").innerHTML = "Please provide a name!";
            // to STOP the form from submitting
            return false;
        } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage1").innerHTML = "";
            return true;
        }

        event.preventDefault(); // Prevent form from submitting
    }
});
}


function start() {
prepareEventHandlers();
prepareEventHandlersName();
}

window.onload = start;

Answer 1

Both functions are running, but you're overwriting the onsubmit handler for frmContact in your second function. To avoid this, don't assign event handlers that way. Instead, use addEventListener.

document.getElementById("frmContact").addEventListener("submit", function(event) {
    if (document.getElementById("email").value == "Your Email") {
        // Show message
        event.preventDefault(); // Prevent form from submitting
    }
});

Note that when you do it this way, you can't prevent the form from submitting by simply returning false. Instead, you have to use the event's preventDefault method.

Answer 2

You should use the browser's built-in validation attributes.

<form id="frmContact" name="frmContact" method="post" action="thanks.htm">
    <fieldset id="quickSupport">
        <legend><strong>Quick Support</strong></legend>
        <p>If your request isn't urgent, drop us a quick line and we'll 
            get back to you within 24 hours</p>
        <p>
            <label for="name">Name:</label>
            <input type="text" value="Your Name" name="name" id="name" 
                tabindex="10" required />
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="text" value="Your Email" name="email" id="email" 
                tabindex="20" required />
        </p>
        <label for="comments">Comments</label>
        <br />
        <textarea name="comments" value="Message" id="comments" cols="45" 
            rows="5" tabindex="60" 
            placeholder="PLACEHOLDER WHEN NO MESSAGE IS WRITTEN" required>Message</textarea>
        </p>
        <p>
            <input type="submit" name="submit" id="submit" value="Send" 
                tabindex="70" />
        </p>
    </fieldset>
</form>

When you try to submit the form, the browser will automatically display nice error messages for you, in the user's language. No JavaScript required.

---

The reason your code is failing, because

document.getElementById("frmContact").onsubmit = ...

will override any previous onsubmit handler you've added.

You need to use .addEventListener() instead, if you want to add multiple functions.

A more correct way would be to create a single function that does all checks, and attach that as the handler, once.