フォーム入力後にカスタムメッセージがまだ表示されています

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