Bootstrap Wizard多步骤表单验证：关联验证器与下一步按钮

Hey Christoph, let's get your multi-step form validation working seamlessly with the Bootstrap wizard. Here's how to tie your jQuery Validate instance to the next-step button logic:

1. Fix the Validation Rule First #

I spotted a small mismatch in your validator code: your radio input uses name='payment_method', but your rule targets boxes (the input's ID, not its name). Let's correct that first to make validation work for the radio option:

var $validator = $("#signupForm").validate({
  rules: {
    payment_method: { // Match the actual name attribute of your radio input
      required: true
    },
    firstname: {
      required: true,
      minlength: 3
    },
    lastname: {
      required: true,
      minlength: 3
    }
  },
  errorElement: "span",
  errorClass: "text-danger" // Optional: style error messages for better visibility
});

2. Modify the Next Step Click Handler #

We need to check if only the current step's fields are valid before allowing the user to move to the next tab. Update your .next-step click function to include validation checks:

$(".next-step").click(function (e) {
  e.preventDefault(); // Prevent default button behavior
  var $activeTab = $('.wizard .nav-tabs li.active');
  var $activePane = $($activeTab.find('a').attr('href')); // Get the currently visible tab pane

  // Validate every required/named field in the active pane
  var isValid = true;
  $activePane.find('[required], [name]').each(function() {
    if (!$validator.element(this)) {
      isValid = false;
      return false; // Break the loop immediately if any field fails validation
    }
  });

  // Only proceed to the next tab if all current fields are valid
  if (isValid) {
    $activeTab.next().removeClass('disabled');
    nextTab($activeTab);
  }
});

3. Optional: Secure Form Submission #

Since your final step has a submit button, add a check to ensure the entire form is valid before sending data to your server:

$("#signupForm").submit(function(e) {
  if (!$validator.form()) {
    e.preventDefault(); // Stop submission if any fields are invalid
    // Optional: Scroll to the first invalid field for better UX
    $('html, body').animate({
      scrollTop: $('.error').first().offset().top - 100
    }, 500);
  }
});

How It All Works #

• When the user clicks "Next", we first target the currently active tab pane.
• We loop through all required fields (or named fields) in that pane and validate each one using your existing $validator instance.
• If all fields pass validation, we enable the next tab and switch to it. If not, validation errors will display, and the user can't proceed until they fix the issues.

Full Updated JavaScript #

Putting it all together, your complete script will look like this:

$(document).ready(function () {
  // Initialize tooltips
  $('.nav-tabs > li a[title]').tooltip();

  // Set up form validation
  var $validator = $("#signupForm").validate({
    rules: {
      payment_method: {
        required: true
      },
      firstname: {
        required: true,
        minlength: 3
      },
      lastname: {
        required: true,
        minlength: 3
      }
    },
    errorElement: "span",
    errorClass: "text-danger"
  });

  // Wizard next step logic with validation
  $(".next-step").click(function (e) {
    e.preventDefault();
    var $activeTab = $('.wizard .nav-tabs li.active');
    var $activePane = $($activeTab.find('a').attr('href'));

    var isValid = true;
    $activePane.find('[required], [name]').each(function() {
      if (!$validator.element(this)) {
        isValid = false;
        return false;
      }
    });

    if (isValid) {
      $activeTab.next().removeClass('disabled');
      nextTab($activeTab);
    }
  });

  // Wizard previous step logic
  $(".prev-step").click(function (e) {
    e.preventDefault();
    var $active = $('.wizard .nav-tabs li.active');
    prevTab($active);
  });

  // Form submission validation
  $("#signupForm").submit(function(e) {
    if (!$validator.form()) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: $('.error').first().offset().top - 100
      }, 500);
    }
  });
});

function nextTab(elem) {
  $(elem).next().find('a[data-toggle="tab"]').click();
}

function prevTab(elem) {
  $(elem).prev().find('a[data-toggle="tab"]').click();
}

内容的提问来源于stack exchange，提问作者Christoph C.