즉석 유효성 검사에 아무 것도 표시되지 않는 이유는 무엇입니까?

Question

많은 필드가있는 양식이 있습니다. 사용자가 아무 것도 입력하지 않으면 필드는 자동으로 입력이 유효한지 여부에 대한 피드백을 보내기 시작합니다. 나열된 자바 스크립트 코드는 즉각적인 피드백을 처리한다고 가정하지만 응답이 전혀 없습니다. 또한 사용자의 입력 중 하나라도 정규식과 일치하지 않으면 양식이 제출되지 않도록합니다. 정규식은 작동하지 않지만 innerHTML을 사용하기 전에 완벽하게 작동합니다. innerHTML을 사용하는 것이 필수적이지 않다면 경고를 사용하는 것으로 돌아갈 것입니다.

function insert() { 

    var valid = true; 

    document.getElementById("MessNM").innerHTML = ""; 
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) { 
     document.getElementById("MessNM").innerHTML = " Please input a proper name."; 
     valid = false; 
    } 

    document.getElementById("MessPS").innerHTML = ""; 
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) { 
     document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters."; 
     valid = false; 
    } 

    document.getElementById("MessPSC").innerHTML = ""; 
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) { 
     document.getElementById("MessPSC").innerHTML = " Password does not match."; 
     valid = false; 
    } 

    document.getElementById("MessAD").innerHTML = ""; 
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]{5,40}$/)) { 
     document.getElementById("MessAD").innerHTML = " Address is not valid"; 
     valid = false; 
    } 

    document.getElementById("MessZC").innerHTML = ""; 
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) { 
     document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode."; 
     valid = false; 
    } 
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) { 
     document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode."; 
     valid = false; 
    } else { 
     return valid; 
    } 
} 

function test() { 

    var result = true; 

    if (!insert()) { 
     result = false; 
    } 

    return result; 
} 

이것은 javascript 기능이 참조하는 html 형식입니다.

<form name="Insert" id="I2" action="order.php" method="post" style="display: none;" onsubmit="return test()"> 
    <p align="left"> 
     <div id="texter"> 
      <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off" autofocus>Name <span id="MessNM"></span> 
      <br> 
      <input type=email id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span> 
      <br> 
      <input type=password id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span> 
      <br> 
      <input type=password id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span> 
      <br> 
      <input type=text id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span> 
      <br> 
      <input type=text id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span> 
      <br> 
     </div> 
     <input type="submit" value="submit" onclick="test()"> 
     <input type="reset" value="Clear All"> 
     <br> 
     <br> 
</form> 

Answer 1

내가 보는 몇 가지 문제점이 있습니다.

1. 전체 양식을 보이지 않게하는 양식에는 style="display: none;"이 있습니다.
2. 처음 유효하지 않은 유효성 검사에서 유효성 검사 기능이 false를 반환합니다. 이는 유효하지 않은 첫 번째 필드에 대한 오류 메시지 만 표시한다는 것을 의미합니다. 전자 메일 주소와 우편 번호가 유효하지 않으면 전자 메일 주소에 대한 메시지 만 받게됩니다.
3. 주소 유효성 검사를위한 정규 표현식이 깨졌습니다.
4. 암호 확인 오류가 수정되면 오류 메시지가 지워지지 않습니다.

경보를 사용할 때 작동한다고 말하면서, 각 필드 유효성 검사가 false를 반환한다는 사실로 인해 발생하는 주요 문제를 추측합니다. 아마 방금 전에 경고가 있었고 함수의 끝에서 부울을 반환했습니다. 여기에 그 문제와 제가 언급 한 다른 문제를 해결하는 해결책이 있습니다.

<form name="Insert" id="I2" action="order.php" method="post" onsubmit="return test()"> 
    <p align="left"> 
     <div id="texter"> 
      <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off"/>Name <span id="MessNM"></span> 
      <br> 
      <input type="email" id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span> 
      <br> 
      <input type="password" id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span> 
      <br> 
      <input type="password" id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span> 
      <br> 
      <input type="text" id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span> 
      <br> 
      <input type="text" id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span> 
      <br> 
     </div> 
     <input type="submit" value="submit" onclick="test()"> 
     <input type="reset" value="Clear All"> 
     <br> 
     <br> 
</form> 

function insert() { 
    var valid = true; 

    document.getElementById("MessNM").innerHTML = ""; 
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) { 
     document.getElementById("MessNM").innerHTML = " Please input a proper name."; 
     valid = false; 
    } 

    document.getElementById("MessPS").innerHTML = ""; 
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) { 
     document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters."; 
     valid = false; 
    } 

    document.getElementById("MessPSC").innerHTML = ""; 
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) { 
     document.getElementById("MessPSC").innerHTML = " Password does not match."; 
     valid = false; 
    } 

    document.getElementById("MessAD").innerHTML = "";               
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]*$/)) { 
     document.getElementById("MessAD").innerHTML = " Address is not valid"; 
     valid = false; 
    } 

    document.getElementById("MessZC").innerHTML = ""; 
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) { 
     document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode."; 
     valid = false; 
    } 
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) { 
     document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode."; 
     valid = false; 
    } 

    return valid; 
}