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/

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

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()">

Answer 2

您需要创建一个onSubmit事件来调用validateForm：

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

形式不验证 - JavaScript

2 个答案: