Question

我遇到了问题，我正在验证表单，当输入字段被聚焦时，我在输入字段后使用jQuery＆＃39; s .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

在运行验证之前，您可以清除以前的所有消息：

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

这将删除error-form类的所有元素，然后您的验证将添加任何无效元素。

Answer 2

由于您在输入消息after()之前，在对该输入运行验证之前，请检查next()元素是否具有类error-form。如果是，请删除。

＆＃13;

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

＆＃13;

.error-form {
  color: red;
}

＆＃13;

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

＆＃13;

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

if($(this).val().length < 1 ) { 

$('span').html('this field is required');

}

最后，当所有验证都完成后，隐藏它

$('span').hide();

您还可以通过jQuery验证等库来查找更多自定义验证

在验证表单时，在输入元素之后插入相同的DOM元素

4 个答案: