2

我在一个简单的 HTML 页面上执行 JavaScript 验证。出错时，我试图将页面重定向到 Error.html，使用window.location.href="Error.html".

我得到显示错误的 JavaScript 弹出窗口，但页面没有重定向。

JS：

function checkifFormIsFilled() {

    var txtUserName = document.getElementById("txtUserName").value;
    var txtFirstName = document.getElementById("txtFirstName").value;
    var txtLastName = document.getElementById("txtLastName").value;
    var txtEmail = document.getElementById("txtEmail").value;
    var txtArea = document.getElementById("txtArea").value;

    var errMessage = "";
    var errorInForm = false;

    if (txtUserName === "") {
        errMessage = "UserName";
        errorInForm = true;
    }
    if (txtFirstName === "") {
        errMessage += ", First Name";
        errorInForm = true;
    }
    if (txtLastName === "") {
        errMessage += ", Last Name";
        errorInForm = true;
    }
    if (txtEmail === "") {
        errMessage += ", Email";
        errorInForm = true;
    }
    if (txtArea === "") {
        errMessage += ", Address";
        errorInForm = true;
    }


    if (errorInForm == true) {
        errMessage += " are required fields";
        window.alert(errMessage);
        //window.location.href = "Error.html";        
        window.navigate("Error.html");
    }
}

HTML：

<form method="post" style="width: 560px; height: 850px; margin-left: 10px; margin-top:10px">
    <fieldset>
        <legend>New User</legend>
        <table>
            <tr>
                <td>
                    <label>User Name:</label></td>
                <td>
                    <input type="text" id="txtUserName" name="User Name" onblur="checkRequired(this)" maxlength="10" /></td>
            </tr>

            <tr>
                <td>
                    <label>First Name:</label></td>
                <td>
                    <input type="text" id="txtFirstName" name="First Name" maxlength="10" onblur="checkRequired(this)" /></td>
            </tr>

            <tr>
                <td>
                    <label>Last Name:</label></td>
                <td>
                    <input type="text" id="txtLastName" name="Last Name" maxlength="10" onblur="checkRequired(this)" /></td>

            </tr>
            <tr>
                <td>
                    <label>Email: </label>
                </td>
                <td>
                    <input type="text" name="emailInput" id="txtEmail" onblur="checkRequired(this)" /></td>
            </tr>

            <tr>

                <td>
                    <label for="lblAddress">Address</label></td>
                <td>
                    <textarea id="txtArea" name="txtAddress" cols="50" rows="5" maxlength="1000" onblur="checkRequired(this)"></textarea></td>
            </tr>


            <tr>
                <td>Groups</td>
                <td>
                    <select name="selGroups">
                        <option value="c1">Employee</option>
                        <option value="c1">HR</option>
                        <option value="c1">Director</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    <select name="selStatus">
                        <option value="c1">Active</option>
                        <option value="c2">Inactive</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnSubmit" value="Add User" type="submit" onclick="checkifFormIsFilled();" />
                </td>
                <td>
                    <button id="btnCancel">Cancel</button>
                </td>
            </tr>

        </table>
    </fieldset>

</form>
4

3 回答 3

2

这应该这样做：

  if (errorInForm == true) {
            errMessage += " are required fields";
            window.alert(errMessage);
            window.location = "Error.html";
        }
于 2012-10-27T12:36:09.797 回答
1

将函数调用放在元素的onsubmit属性中。form如果发现错误，您可能还必须返回 false，以防止它转到同一页面而不是您的错误页面。

于 2012-10-27T14:44:02.657 回答
0

试试这个：

<input id="btnSubmit" value="Add User" type="button" onclick="checkifFormIsFilled();" />

由于表单提交给自己，重定向没有发生。

演示

于 2012-10-27T12:27:59.100 回答