填寫表單輸入後仍然顯示自定義消息

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