警告ボックスは、この機能を考えると、ボタンを提出

Question

にN回をクリックした後、N回現れます）、アラートボックスは1回だけ表示されます。 Registerを再度押すと、アラートボックスが2回表示されます。どうしたの？

required属性がSafariで機能しないため、カスタムJavaScript関数を使用してフォームの検証を行っています。

ありがとうございます。

Answer 1

あなたのヒットサブミットボタン、つまりvalidateが機能するたびに、いつでもイベントリスナーを送信してください。これを処理するには2つの方法があります。登録するには、一度だけ登録するか、追加したリスナーを最初に削除して追加します。

最初の方法

function validate() { 
    var elements = ["firstname", "lastname", "password", "favfood", "favsport"]; 

    document.getElementById('register').noValidate = true; 
    document.getElementById('register').addEventListener('submit', function(event) { 
     for (var i = 0; i < elements.length; i++) { 
     if(document.getElementById(elements[i]).hasAttribute("required")) { 
      if(!document.getElementById(elements[i]).checkValidity()) { 
       event.preventDefault(); 
       alert('Please, fill in every required field of the form.'); 
       break; 
      } 
     } 
     } 
    }, false); 
} 

validate(); // call this function directly and remove it from your submit button 

第二の方法

function validateCallback(event) { 
    var elements = ["firstname", "lastname", "password", "favfood", "favsport"]; 

    for (var i = 0; i < elements.length; i++) { 
    if(document.getElementById(elements[i]).hasAttribute("required")) { 
     if(!document.getElementById(elements[i]).checkValidity()) { 
      event.preventDefault(); 
      alert('Please, fill in every required field of the form.'); 
      break; 
     } 
    } 
    } 
} 

function validate() { 
    document.getElementById('register').noValidate = true; 
    document.getElementById('register').removeEventListener('submit', validateCallback, false); 
    document.getElementById('register').addEventListener('submit', validateCallback, false); 
} 

、あなたが現在使用しているのと同じそれを使用しています。

Answer 2

validateメソッドの中で、毎回送信ボタンに新しいイベントリスナーを追加するため、アラートが増えています。