JavaScript form submits despite a wrong answer

Question

My contact form still submits if the wrong answer is input into the 'are you human field'. I am not sure where I am going wrong and where to even begin searching for the problem - I have no errors in the dev tools console:

HTML:

<section class="contact" id="contact">
    <div class="container">
        <div class="row">
            <h2>Contact Me</h2>
        </div>
        <div class="row">
            <div id="form-messages"></div>
            <form method="post"  name="contactform" id="contactform">
                <div class="col-md-6">
                    <fieldset>
                        <input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required>
                        <br>
                        <span id="errorname" class="error">First name is required</span>
                        <input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required>
                        <br>
                        <span id="erroremail" class="error">Invalid email address</span>
                        <input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required>
                        <span id="errorhuman" class="error">Your answer is incorrect!</span>
                        <br>
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <fieldset>
                        <textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea>
                        <span id="errormessage" class="error">Please enter a message</span>
                    </fieldset>
                </div>
                <div class="col-md-12">
                    <fieldset>
                        <button type="submit" class="btn btn-lg" id="submit" value="Submit" tabindex="5" onclick="return validate();">Send Message</button>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
</section>

CSS:

.error {
    color: red;
    font-style: italic;
    font-size: 17px;
    visibility: hidden;
}

JS:

function validate() {
    var error = 0;

    var errorname = document.getElementById("errorname");
    var user_name = document.contactform.user_name.value;
    if (user_name === "") {
        errorname.style.visibility = "visible";
        error = 1;
    } else {
        errorname.style.visibility = "hidden";
        error = 0;
    }

    var erroremail = document.getElementById("erroremail");
    var user_email = document.contactform.user_email.value;
    if (user_email === "") {
        erroremail.style.visibility = "visible";
        error = 1;
    } else {
        erroremail.style.visibility = "hidden";
        error = 0;
    }

    var wrongAnswer = document.getElementById("wronganswer");
    var errorhuman = document.getElementById("errorhuman");
    var user_human = document.contactform.user_human.value;
    if (user_human === "" || user_human !== 4) {
        errorhuman.style.visibility = "visible";
        error = 1;
    }  else {
        userhuman.style.visibility = "hidden";
        error = 0;
    }

    var errormessage = document.getElementById("errormessage");
    var user_message = document.contactform.user_message.value;
    if (user_message === "") {
        errormessage.style.visibility = "visible";
        error = 1;
    } else {
        errormessage.style.visibility = "hidden";
        error = 0;
    }

    if(error == 0) {
        return true;
    } else {
        return false;
    }
}

Any help or point in the direction would be brilliant.

Thanks, James.

Answer 1

Move the event into JS, change error var value if something is invalid and prevent form submit if there is an error or more:

• An input value is a string, soi if you need a strong comparaison, you need to use: user_human !== "4"

 document.getElementById("submit").addEventListener("click", validate); function validate(e) { var false = 0; var errorname = document.getElementById("errorname"); errorname.style.visibility = "hidden"; if (document.contactform.user_name.value === "") { errorname.style.visibility = "visible"; error = true; } var erroremail = document.getElementById("erroremail"); erroremail.style.visibility = "hidden"; if (document.contactform.user_email.value === "") { erroremail.style.visibility = "visible"; error = true; } var errorhuman = document.getElementById("errorhuman"); var user_human = document.contactform.user_human.value; errorhuman.style.visibility = "hidden"; if (user_human === "" || user_human !== "4") { errorhuman.style.visibility = "visible"; error = true; } var errormessage = document.getElementById("errormessage"); errormessage.style.visibility = "hidden"; if (document.contactform.user_message.value === "") { errormessage.style.visibility = "visible"; error = true; } if (error) { e.preventDefault(); alert("form error"); } } 

 .error { visibility:hidden; } 

 <section class="contact" id="contact"> <div class="container"> <div class="row"> <h2>Contact Me</h2> </div> <div class="row"> <div id="form-messages"></div> <form method="post" name="contactform" id="contactform"> <div class="col-md-6"> <fieldset> <input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required> <br> <span id="errorname" class="error">First name is required</span> <input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required> <br> <span id="erroremail" class="error">Invalid email address</span> <input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required> <span id="errorhuman" class="error">Your answer is incorrect!</span> <br> </fieldset> </div> <div class="col-md-6"> <fieldset> <textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea> <span id="errormessage" class="error">Please enter a message</span> </fieldset> </div> <div class="col-md-12"> <fieldset> <input type="submit" class="btn btn-lg" id="submit" value="Send Message" tabindex="5"> </fieldset> </div> </form> </div> </div> </section> 

Answer 2

error is simple you are not stopping form from submitting which should be done immediately after submit button is clicked and you function is called. So, form does not care about your function's response and it gets submitted. Just stop form validate and submit like:

document.getElementById("submit").addEventListener("click", validate);

function validate(e) {
   e.preventDefault(); // do things here }

then check for answers and if answer are right submit the form otherwise return false;