1

bit of a noob with form validation. I'm trying to get this form to validate on the required fields, and something's amiss. Here's what I'm working with:

html:

<form action="../visit/thankyou.html" method="post" id="vsurvey">
    <input type="hidden" name="id" value="503" />
    <fieldset>
        <legend>Group and Coordinator Information</legend>
        <label><span>Group Leader Name<span style="color:#cc2d30">*</span></span>
            <input type="text" name="question_8149" />
        </label>
        <label><span>Email<span style="color:#cc2d30">*</span></span>
            <input type="text" name="question_8155" />
        </label>
        <label><span>Phone<span style="color:#cc2d30">*</span></span>
            <input type="text" name="question_8156" />
        </label>
        <label><span>School/Organization<span style="color:#cc2d30">*</span></span>
            <input type="text" name="question_8159" />
        </label>
        <label><span>Program</span>
            <input type="text" name="question_8180" />
        </label>
        <label><span>Grade(s)</span>
            <input type="text" name="question_8181" />
        </label>
        <label><span>Number of Participants<span style="color:#cc2d30">*</span></span>
            <input type="text" name="question_8182" />
        </label>
    </fieldset>
    <fieldset>
        <label><span>Preferred Date<span style="color:#cc2d30">*</span></span>
            <input class="date" type="text" id="question_8185" name="question_8185" />
        </label>
        <label><span>Second Preference Date<span style="color:#cc2d30">*</span></span>
            <input class="date" type="text" id="question_8186" name="question_8186" />
        </label>
        <label><span>Third Preference Date<span style="color:#cc2d30">*</span></span>
            <input class="date" type="text" id="question_8187" name="question_8187" />
        </label>
        <label>Special Accommodations
            <input type="text" name="question_8174" />
        </label>
    </fieldset>
    <label>What is the purpose or desired outcome of this visit?
        <textarea name="question_13026"></textarea>
    </label>
    <label>How did you learn about our Group Visit Program?
        <textarea name="question_8176"></textarea>
    </label>
    <label>Comments
        <textarea name="question_8184"></textarea>
    </label>
    <input type="submit" id="sbutton" value="Submit Request" />
</form>

js:

function validateForm() {
    var x = document.forms["vsurvey"]["question_8149"].value;
    if (x == null || x == "") {
        alert("Please fill in the Group Leader's name.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8155"].value;
    if (x == null || x == "") {
        alert("Please fill in the email field.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8156"].value;
    if (x == null || x == "") {
        alert("Please fill in the phone field.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8159"].value;
    if (x == null || x == "") {
        alert("Please fill in the School/Organization field.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8182"].value;
    if (x == null || x == "") {
        alert("Please indicate the number or participants.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8185"].value;
    if (x == null || x == "") {
        alert("Please enter your preferred date.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8186"].value;
    if (x == null || x == "") {
        alert("Please enter your second date preference.");
        return false;
    }

    var x = document.forms["vsurvey"]["question_8187"].value;
    if (x == null || x == "") {
        alert("Please enter your third date preference.");
        return false;
    }
}

http://jsfiddle.net/blackessej/9a6BJ/1/

Currently the form submits the info anyway, but without sending the user to the thankyou page, if all required fields aren't filed in. If all required fields are filed, the thankyou page gets called.

3
  • 1
    where do you call validateForm? Commented Apr 15, 2013 at 16:04
  • 1
    you should use the onsubmit event of the form to trigger your validateForm method... apparently you're not even calling it Commented Apr 15, 2013 at 16:06
  • 2
    also, validateForm will currently return undefined if everything validates. Just add a return true to the bottom Commented Apr 15, 2013 at 16:09

2 Answers 2

3

You're not calling validatorForm. Your input button needs to be the following

<input type="submit" id="sbutton" value="Submit Request" onclick="return validateForm()" />

Or use the onsubmit event of your form

<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()">
Sign up to request clarification or add additional context in comments.

5 Comments

Don't use inline JS! It's easy enough (and infinitely better) to create a submit event in the script.
@Robbert, I have a follow up question, if you have the time and inclination. The error message currently only calls the top-most unvalidated field's message up. How can I adapt my code so that it calls the error msg for all unvalidated fields?
What I do for this situation, is create an array like var errors = new Array(); Everytime there's an error, do errors.push(<your error message here>). at the end, test if errors.lenght is greater then 0. If it is, show the errors: alert("Errors occurred\n\n" + errors.join("\n")) and return false.
Just as you shouldn't use inline event handlers, you also shouldn't use var errors = new Array();! Let's not promote bad habits! Just use var errors = [];.
I agree, var errors = [] works. Not sure that it's any better than new Array(), but it sure cuts done on code. @DerekHenderson, can you tell me why new Array() is considered a bad habit?
2

You need to create an onSubmit event to call validateForm:

document.getElementById('vsurvey').onsubmit = validateForm;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.