CODEWITHSUNDEEP
javascripthtmljquery
Nullified
Nullified

Reputation: 27

How can i add a class on two same class name using a each function jquery?

I am trying to add class on two input type date using classname, how ever it is only applying on one input . Here is the code below:

var caliqui_button  = $("#caliqui-submit");
  $(caliqui_button).click( function(e) {
    e.preventDefault();
    var fields = $(".date_caliqui");
    fields.each(function() {
            if($(this).hasClass("date_caliqui")){
              errortInput(this);
              return false;
              
            }
        
        });
    
});

function errortInput(id){
      $(id).addClass('error');
      setTimeout(function() {
          $(id).removeClass('error');
        }, 300);
    }
.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui" name="date_caliqui[]">
<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui" name="date_caliqui[]">
<button type="submit" class="btn btn-primary" id="caliqui-submit">Submit</button>

Upvotes: 1

Views: 51

Answers (1)

Denis Omerovic
Denis Omerovic

Reputation: 1440

var caliqui_button  = $("#caliqui-submit");
var fields = $(".date_caliqui");

$(caliqui_button).click( function(e) {
  e.preventDefault();
  fields.each(function() {
    errortInput(this);
  });

});

function errortInput(element){
  $(element).addClass('error');
  setTimeout(function() {
      $(element).removeClass('error');
    }, 2000);
}
.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui_0" name="date_caliqui[]">
<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui_1" name="date_caliqui[]">
<button type="submit" class="btn btn-primary" id="caliqui-submit">Submit</button>

return false will stop function from executing so after first input function will not run. You should remove return false in order to make it work. Also inputs should have a unique ID - See more here . I tweaked your code a little bit but this should work.

Upvotes: 1

Related Questions