javascript - 表单未验证 - javascript

Question

表单验证有点菜鸟。我正在尝试让此表单在必填字段上进行验证，但有些不对劲。这是我正在处理的内容:

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/

目前，如果未填写所有必填字段，表单无论如何都会提交信息，但不会将用户发送到感谢页面。如果提交了所有必填字段，则会调用感谢页面。

Answer 1

您没有调用 validatorForm。您的输入按钮需要如下所示

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

或者使用表单的 onsubmit 事件

<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()">