JavaScript를 사용하여 간단한 HTML 페이지 리디렉션

Question

간단한 HTML 페이지에서 JavaScript 유효성 검사를 수행하고 있습니다. 오류가 발생하면 window.location.href="Error.html"을 사용하여 페이지를 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 :

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

폼 자체에 제출 된 이후 리디렉션이 발생하지 않은 :

<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

대신 form 요소상의 onsubmit 속성에 함수 호출을 넣습니다. 오류가 발견되면 오류 페이지 대신 동일한 페이지로 이동하는 것을 방지하기 위해 false를 반환해야 할 수도 있습니다.

Answer 2

이 시도 .

DEMO

Answer 3

이 수행해야합니다

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