Почему моя мгновенная проверка не отображает ничего?

Question

У меня есть форма, на которой есть несколько полей. Когда пользователь вводит что-либо, поле должно автоматически начинать отправку обратной связи относительно того, действителен ли вход. Перечисленный код javascript должен обрабатывать мгновенную обратную связь, но он не дает никакого ответа. Также предполагается прекратить отправку формы, если какой-либо вход пользователя не соответствует регулярным выражениям. Регулярные выражения тоже не работают, но они отлично работали, прежде чем я использовал 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; 
} 

Это html-форма, на которую ссылается функция javascript.

<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; 
}