相同的DOM元素插入輸入元素後驗證表單

Question

我被困在一個問題中，我正在驗證一個表單，我使用jQuery的.after()方法插入帶錯誤消息的DOM元素，輸入字段後輸入字段專注。但是，如果該字段爲空，並且輸入字段多次聚焦且未聚焦，則會多次添加DHTML DOM元素。
HTML是：

<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> 

的Javascript是：

(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').remove(); 

這將刪除所有與error-form類的元素，然後你的審定會在任何無效元素添加。

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驗證等庫來查找更多定製驗證