同じDOM要素が入力要素の後に挿入されています

Question

入力フィールドの後に入力フィールドの後にjQueryの.after()メソッドを使用してエラーメッセージと共にDOM要素を挿入している、問題を抱えています。焦点が合っている。しかし、フィールドが空であり、入力フィールドが1回以上フォーカスされ、フォーカスが外れている場合、DHTML DOM要素は複数回追加されます。 Javascriptがようである

<div class="container"> 
     <h1>Hello</h1> 
     <form> 
      <input type="text" name="username" id="username"> 
      <input type="password" name="password" id="password"> 
      <input type="submit" name="login" value="Login"> 
     </form> 
    </div> 
    <style type="text/css"> 
     .error-form{ 
      color: red; 
     } 
    </style> 

：として
HTMLがある

(function(){ 
    var form = jQuery('form')[0]; 
    jQuery.each(form, function(i, v){ 
     $(v).on('focusout', function(evt){ 
      var self = $(this); 
      if (self.val().length < 1) { 
       self.after($('<span />', { 
        text: "This field is required", 
        class: 'error-form' 
       })); 

      } 
     }); 
    }); 
})(); 

私は要素がすでに追加止めるよりも、存在しているかどうかをチェックするようなソリューションを試みたが、成功しませんでした。どうすれば問題に対処できますか？

すべての提案をいただければ幸いです。

Answer 1

メッセージにafter()を入力しているので、その入力で検証を実行する前に、next()要素のクラスがerror-formであるかどうかを確認してください。その場合は削除してください。

(function() { 
 
    var form = jQuery('form')[0]; 
 
    jQuery.each(form, function(i, v) { 
 
    $(v).on('focusout', function(evt) { 
 
     if ($(this).next().hasClass('error-form')){ 
 
     $(this).next().remove(); 
 
     } 
 
     var self = $(this); 
 
     if (self.val().length < 1) { 
 
     self.after($('<span />', { 
 
      text: "This field is required", 
 
      class: 'error-form' 
 
     })); 
 

 
     } 
 
    }); 
 
    }); 
 
})();

.error-form { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h1>Hello</h1> 
 
    <form> 
 
    <input type="text" name="username" id="username"> 
 
    <input type="password" name="password" id="password"> 
 
    <input type="submit" name="login" value="Login"> 
 
    </form> 
 
</div>

Answer 2

あなたが検証を実行する前に、あなたはクリアすることができ、以前のすべてのメッセージ：これはerror-formクラスを持つすべての要素を削除し、その後、あなたの検証は無効な要素のための任意に追加されます

$('.error-form').remove(); 

。

Answer 3

次の要素がspanに出回っていないかどうかをチェックすることができます。

(function(){ 
    var form = jQuery('form')[0]; 
    jQuery.each(form, function(i, v){ 

     $(v).on('focusout', function(evt){ 
      var self = $(this); 
      if (self.val().length < 1 && self.next().is(':not(span)')) { 
       self.after($('<span />', { 
        text: "This field is required", 
        class: 'error-form' 
       })); 

      } 


     }); 
    }); 
})(); 

フィドル：あなたは、単一の要素のために必要な、電子メールなどのようなより多くのメッセージが必要な場合はhttps://jsfiddle.net/01uc9gec/

Answer 4

、あなたはすべての入力後、任意のテキストなしで静的なスパンを追加してからのみ

​​ようなHTMLを変更してみてください

最後に、すべての検証が満たされている非表示にそれ

$('span').hide(); 

jQueryのバリデーションのようなライブラリを使ってさらにカスタマイズされたバリデーションを探すこともできます