javascript - 错误标签仅显示一次事件所有输入均为空

Question

我正在尝试创建一个带有条件的表单，当每个 input 中的一个或全部为空时，它将在 label 上创建 span .

HTML :

<form action="" method="post" role="form" accept-charset="utf-8" class="testform" >
      <legend>test</legend>
      <div class="form-group">
        <label for="username">username :</label>
        <input type="text" id="username" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="password">password :</label>
        <input type="password" id="password" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="repassword">re-type password :</label>
        <input type="password" id="repassword" class="form-control m-20">
      </div>
      <div class="form-group">
        <label for="email">Email :</label>
        <input type="Email" id="email" class="form-control m-20">
      </div>                        
      <button id="send" class="btn btn-primary">
        submit
      </button>
 </form>

关于js代码。如果输入为空且有效，我会尝试检查将标签的背景更改为绿色。

然后我尝试在带有前缀的标签上创建跨度。但是当我运行它时，只有标签电子邮件得到了跨度。如果我只填写电子邮件。只有 repassword 的标签得到了跨度。当我只使用代码更改背景时，我没有发现。

任何人都可以发现问题所在。谢谢

JS :

// button submit got clicked
$('#send').on("click", function(){ 
    var input= $('.testform input');
    var empty= $("<span class=\"error\">empty</span>");
    // check input if have value if empty
    input.each(function() {
        var self=this;
        var value=$(this).val();
        // if empty change color of label
        if(value ==""){
            // $(self).parent(".form-group").find("label").prepend(empty);
            $(self).parent(".form-group").find("label").css({"background": "green"});
        }else{
            $(self).parent(".form-group").find("label").css({"background": "white"});
        }
    });
    return false;
});

Answer 1

发生这种情况是因为您试图将相同的元素 empty 分配给所有输入，这是不可能的，因此它只会分配给最后一个输入，因此您应该 clone empty 元素，每次你想分配它时:

$(this).parent(".form-group").find("label").prepend(empty.clone(true));

希望这对您有所帮助。

$('#send').on("click", function(event){ 
  event.preventDefault();
  $('.error').remove();
  var $inputs= $('.testform input');
  var empty= '<span class="error">empty</span>';

  $inputs.each(function() {
    var $this=$(this);
    var value=$(this).val();

    if(value ==""){
      $this.parent(".form-group").find("label").prepend(empty);
      $this.parent(".form-group").find("label").css({"background": "green"});
    }else{
      $this.parent(".form-group").find("label").css({"background": "white"});
    }
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" role="form" accept-charset="utf-8" class="testform" >
  <legend>test</legend>
  <div class="form-group">
    <label for="username">username :</label>
    <input type="text" id="username" class="form-control m-20">
  </div>
  <div class="form-group">
    <label for="password">password :</label>
    <input type="password" id="password" class="form-control m-20">
  </div>
  <div class="form-group">
    <label for="repassword">re-type password :</label>
    <input type="password" id="repassword" class="form-control m-20">
  </div>
  <div class="form-group">
    <label for="email">Email :</label>
    <input type="Email" id="email" class="form-control m-20">
  </div>                        
  <button id="send" class="btn btn-primary">
    submit
  </button>
</form>