Code Bug Fix: How to disable the next button in a multistep form when displayed fields are not yet validated

Original Source Link

I am trying to make a multistep form. In the form, the next button is disabled until all currently displayed fields are satisfied by the user.

I’ll be adding more validation. Now, on the start of the document, the next button is disabled. Then, when the user clicks on the link, the button becomes enabled. The problem is, how would i go about disabling it again for the next step of the form, up until the very last page where it would change into a submit button?

$(document).ready(function() {
  var currTab, nextTab, prevTab;
  $("#nextBtn").prop('disabled', true);

  //No back button on first page
  if ($(".show").hasClass('first-page')) {
    $("#prevBtn").prop('disabled', true);
  }

  //Next click
  $("#nextBtn").click(function() {
    currTab = $(this).siblings('.content.show');
    nextTab = $(this).siblings('.content.show').next();
    $("#prevBtn").prop('disabled', false);
    $(currTab).removeClass('show');
    $(nextTab).addClass('show');

  });

  //Previous click
  $("#prevBtn").click(function() {
    currTab = $(".show");
    prevTab = $(".show").prev();
    $(currTab).removeClass('show');
    $(prevTab).addClass('show');

    if ($(".show").hasClass('first-page')) {
      $("#prevBtn").prop('disabled', true);
    }


  });

  //Check if link is clicked
  $("#update_link").click(function() {
    $(this).addClass('clicked');
    $("#nextBtn").prop('disabled', false);
    console.log(this);
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content show first-page">
  <h1>First Page</h1>
  <p>Here are some sample text.<br> You need to update your information. <br> Click <a href="/dashboard" target="_blank" id="update_link">here</a> to proceed to the student information page.
  </p>

</div>
<div class="content">
  <h1>Second Page</h1>

</div>
<div class="content">
  <h1>Third Page</h1>

</div>
<button type="button" class="btn btn-light" id="prevBtn">Previous</button>
<button type="button" class="btn btn-light" id="nextBtn">Next</button>

If you use JS validation, you should set classes on your inputs whether they are valid or invalid. You then simply can check $('.invalid').filter(':visible').length > 0 to see if invalid fields are visible (and disable the next button). And $('.invalid').length = 0 to check if all inputs are valid to see that you need to change the button into a submit.
If you use html5 validation, you can use the pseudo class :invalid instead.

You should bind your each page within a <form> element, so that your form validations can work.

<html>
<form name="form1">
<input name="firstName" required placeholder="enter first name">
<input name="lastName" required placeholder="enter last name">
<input name="age" required placeholder="enter age">
<button name="submitButton1" type="submit">Submit</button>
</form>

<script>
    function validateForm() {
      var firstName = document.forms["form1"]["firstName"];
      var lastName = document.forms["form1"]["lastName"];
      var age = document.forms["form1"]["age"];
      var formInvalid = false;
      if(firstName.value == ""){
         formInvalid = true;
      }
      if(lastName.value == ""){
         formInvalid = true;
      }
      if(age.value == ""){
         formInvalid = true;
      }
      if(formInvalid)
        document.forms['form1']['submitButton1'].setAttribute("disabled","disabled")
    }
</script>

If your inputs are empty then disable your submit button like this.

Tagged : /

Leave a Reply

Your email address will not be published. Required fields are marked *