[Solved] Validating multiple form fields with JavaScript [closed]

Question

I don’t know where to start from, but if you need your own validation you should remove required attribute from the inputs because FF for example will check the form instead of your validation function.

Executing event.preventDefault(); what do you think you have in event?

Properlly you should pass it when calling the function on submit and supply an argument in the function definition

onSubmit="validateForm(event);"

and function definition should be:

function validateForm(event) {
  ... 
  so you can do event.preventDefault()
  ...
}

You may have other problems too, but at least you will get the validation function executed and you;ll have event in it

COMPLETE EXAMPLE ADDED:

<script>

function validateForm(event) {

    var phone = document.getElementById("phonenumber").value,
    email = document.getElementById("email").value,
    name = document.getElementById("name").value,
    address = document.getElementById("address").value,
    tomatch = /^\d{3}-\d{3}-\d{4}$/,
    emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/,
    errors = [];

    if (!phone){
      errors.push("The Phone Number is required.");
    } else if (!tomatch.test(phone)){
      errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
    }

    if (!name){
      errors.push("The Name is required");
    }

    if (!email){
      errors.push("The email is required.");
    } else if (!emailMatch.test(email)){
      errors.push("The email must be formated as follows: [email protected].");
    }

    if (!address){
      errors.push("The Address is required.");
    }

    if (errors.length) {
      event.preventDefault();
      alert(errors.join("\n"));
    }

}
</script>

<form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="validateForm(event)">
 <label for="Name">Name:</label><br />
 <input size="100%" type="text" name="name" id="name"><br>
 <label for="Email">E-mail:</label><br />
 <input size="100%" type="text" name="email" id="email" value=""><br />
 <label for="Phone">Phone Number:</label><br />
 <input size="100%" type="text" name="phonenumber" id="phonenumber" value=""><br />
 <label for="Address">Shipping Address:</label><br />
 <input size="100%" type="text" name="address" id="address" value=""><br />

 <label for="comment">Input Comments/Questions:</label><br />
 <input size="100%" type="text" name="comment" value=""><br><br>
  Please choose a file: <br />
 <input name="uploaded" type="file" /><br />
 <br />

 <input size="100%" type="submit" value="Submit" /><br />
 <input size="100%" type="reset" value="Reset">
</form>

Accepted Answer