Пользовательское сообщение, все еще отображающееся после ввода формы заполнено

Question

Я выполняю проверку на стороне клиента при настройке настраиваемых предупреждающих сообщений, но это же всплывающее сообщение продолжает отображаться даже тогда, когда ввод заполняется именем.

Например у меня есть поле ввода, чтобы получить имя пользователя на код ниже:

<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php"> 
      <div> 
       <label for="name">Your name</label> 
       <input type="text" id="name" name="name" required=""> 

      </div> 
      <div> 
       <label for="mail">Your email</label> 
       <input type="email" id="mail" name="user_mail" required=""> 
      </div>     
      <div> 
       <label for="topic">Select Topic</label> 
       <select id="topic" name="topic" required=""> 
        <option selected disabled hidden value="">Choose a Topic</option> 
        <option value="link">Site Link</option> 
        <option value="copyright">Copyright</option> 
        <option value="errors">Site/Article errors</option> 
        <option value="feedback">Feedback</option> 
        <option value="other">Other</option> 
       </select> 
      </div>     
      <div> 
       <label for="msg">Your message</label> 
       <textarea id="msg" name="user_message" required=""></textarea> 
      </div>     
      <div class="button"> 
       <button type="submit">Submit</button> 
      </div> 
     </form> 

И я написал яваскрипт код, чтобы изменить сообщение об ошибке браузера по умолчанию на картинку ниже:

var inputName = document.getElementById('name'); 
var form = document.getElementById('form'); 

form.onsubmit = validateForm(); 

function validateForm() { 

    if(inputName.value === ""){ 
     inputName.setCustomValidity("Name is required"); 
     return false; 
    } else { 
     inputName.setCustomValidty(""); 
    } 
} 

Что я делаю неправильно?

Answer 1

Существовали две проблемы в вашем JavaScript, которые были причиной вашей проверки ломаться:

• validateForm функция была запущена при загрузке страницы, а не когда пользователь отправляет форму. Я добавил в пересмотренном обработчик событий для устранения этой ошибки
• орфографической генерировал ошибку: setCustomValidty должен быть setCustomValidity

Следующий код исправляет эти проблемы.

HTML:

<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php"> 
    <div> 
     <label for="name">Your name</label> 
     <input type="text" id="name" name="name" required=""> 

    </div> 
    <div> 
     <label for="mail">Your email</label> 
     <input type="email" id="mail" name="user_mail" required=""> 
    </div>     
    <div> 
     <label for="topic">Select Topic</label> 
     <select id="topic" name="topic" required=""> 
      <option selected disabled hidden value="">Choose a Topic</option> 
      <option value="link">Site Link</option> 
      <option value="copyright">Copyright</option> 
      <option value="errors">Site/Article errors</option> 
      <option value="feedback">Feedback</option> 
      <option value="other">Other</option> 
     </select> 
    </div>     
    <div> 
     <label for="msg">Your message</label> 
     <textarea id="msg" name="user_message" required=""></textarea> 
    </div>     
    <div class="button"> 
     <button id="submit" type="submit">Submit</button> 
    </div> 
</form> 

JavaScript:

var inputName = document.getElementById('name'); 
var form = document.getElementById('form'); 
var submitButton = document.getElementById("submit"); 

submitButton.onclick = function() { validateForm(); }; 

function validateForm() { 
    if(inputName.value === ""){ 
     inputName.setCustomValidity("Name is required"); 
     return false; 
    } else { 
     inputName.setCustomValidity(""); 
    } 
}