Question

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

我得到JavaScript pop显示错误，但页面没有重定向。

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>

Answer 1

这应该做：

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

Answer 2

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

Answer 3

试试这个：

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

由于表单正在提交给自己，因此没有重定向。

DEMO

使用JavaScript重定向简单的HTML页面

3 个答案: