Question

我正在尝试创建一个包含条件的表单，当其中一个input或全部为空时，它将在span上创建label。

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代码上。如果输入为空并且工作正常，我会尝试将标签的背景更改为绿色。

然后我尝试使用prepend在标签上创建span。但是当我运行它时，只有标签电子邮件得到了跨度。如果我只填写电子邮件。只有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 {每次要分配时都会{1}}元素：

empty

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: