填写表单输入后仍然显示自定义消息

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> 

我写下面的JavaScript代码来改变默认浏览器的错误信息下面的一个：

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(""); 
    } 
}