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

Question

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>

Denis Omerovic · Accepted Answer · 2021-03-31 05:57:40Z

1

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.

edited Mar 31, 2021 at 5:57

answered Mar 31, 2021 at 5:45

Denis Omerovic

1,4521 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jon P Over a year ago

While this may work, a good answer should explain what was wrong with the original code and what was done to fix it. It is often hard to spot small changes in a chunk of code

Nullified Over a year ago

thanks it work perfectly i just forgot something on my code!

Denis Omerovic Over a year ago

@Chalesangsioco glad i could help. Just make sure you accept the answer if is correct. See more here stackoverflow.com/help/someone-answers

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related