vandi vandi - 16 days ago 6
Javascript Question

Error label only show once event all inputs are empty

I'm trying to create a form with conditions, when one of each

input
or all empty, it will create
span
on
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>


On js code. I try to check with change the label's background to green if the input is empty and its work.

Then I try to create the span on label with prepend. but when I run it, only the label email got span. if I fill only for email. only repassword's label got span. I didn't find that when I only use code for change background.

Anyone find what is wrong. thanks

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

That happen because you're trying to assign the same element empty to all the inputs and that impossible so it will assigned just to the last input, so instead you should clone the empty element every time you want to assign it :

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

Hope this helps.

// 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() {

    // if empty change color of label
    if($(this).val() ==""){
      $(this).parent(".form-group").find("label").prepend(empty.clone(true));
      $(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>