I am performing JavaScript validation on a simple HTML page. On error I am trying to redirect the page to Error.html, using window.location.href="Error.html".

I get the JavaScript pop displaying the error but page doesn't redirect.

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>

I am performing JavaScript validation on a simple HTML page. On error I am trying to redirect the page to Error.html, using window.location.href="Error.html".

I get the JavaScript pop displaying the error but page doesn't redirect.

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>

• javascript
• html

• @qwerty You probably put the function definition in page load – user1726343 Commented Oct 27, 2012 at 12:22
• Put the function call in an onsubmit attribute on the form instead. You may also have to return false as well. – DanMan Commented Oct 27, 2012 at 13:14
• 1 An error redirecting to an error page. Oh the irony!. – Madara's Ghost Commented Oct 27, 2012 at 14:47
• Also, just a note on user experience, I, as the user, would appreciate you much more if you'd state where the error is inline, rather than throwing me away on some error page. – Madara's Ghost Commented Oct 27, 2012 at 14:49

3 Answers 3

This should do:

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

Put the function call in an onsubmit attribute on the form element instead. You may also have to return false as well, if an error was found, to prevent it from going to the same page instead of your error page.

Try this:

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

Since the form was submitting to itself, the redirect wasn't occurring.

DEMO