Jquery add and remove class on form validation condition

Question

I have the following code, Which adds and remove class, The class is used to bring the next stage of the form, The form is step by step, Fill some fields validate on next and then fill others,

Button :

<input type="button" id="petOwnerStepOne" class="next" value="CONTINUE" />

The below code is not working.

$('#stepOne').click(function() {
  if ($('#FormID').valid()) {
    $( "#stepOne" ).addClass("next");
  } else {
    $( "#stepOne" ).removeClass("next");
  }
});

The class adds but the form never goes to step two, Without the above code and adding class to <input class="next"> works fine.

It goes to next step of the form by :

  $(".next").click(function() {
    if (animating) return false;
    animating = true;
    current_fs = $(this).parent();
    next_fs = $(this)
    .parent()
    .next();
    $("#progressbar li")
    .eq($("fieldset").index(next_fs))
    .addClass("active");
    next_fs.show();
    current_fs.animate(
      { opacity: 0 },
      {
        step: function(now, mx) {
          scale = 1 - (1 - now) * 0.2;
          left = now * 50 + "%";
          opacity = 1 - now;
          current_fs.css({ transform: "scale(" + scale + ")" });
          next_fs.css({ left: left, opacity: opacity });
        },
        duration: 800,
        complete: function() {
          current_fs.hide();
          animating = false;
        },
        easing: "easeInOutBack"
      }
      );
  });

What am i missing ?

very unclear what you are asking, what do you mean all the code you show works but the form never goes to step two, where is the code for that ? — john Smith
– john Smith, Commented Feb 10, 2018 at 10:27

john Smith · Accepted Answer · 2018-02-10 10:51:40Z

1

change

$(".next").click(function() {

to

$(document).on("click",".next", function(){

because when your code is parsed the next class doesnt exist in DOM yet,common pitfall

https://learn.jquery.com/events/event-delegation/

answered Feb 10, 2018 at 10:51

john Smith

18k12 gold badges80 silver badges124 bronze badges

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

Comments

Replik · Accepted Answer · 2018-02-10 10:28:40Z

0

please describe how the behavior of the form changes depending on the availability of the class "next". You can add you HTML code sample. Are you debugging this code and "valid" method? If you use google chrome you can put "debbuger" word before method valid() call and then see step by step what's happening. Or simple use console.log() in your code.

answered Feb 10, 2018 at 10:28

Replik

544 bronze badges

Collectives™ on Stack Overflow

Jquery add and remove class on form validation condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related