如何为BootstrapWizard实现表单字段非空验证？

Hey there! Great question—this is a super common requirement for multi-step forms, and Bootstrap Wizard makes it straightforward to implement with its built-in event hooks. Let's break down where and how to add your validation logic:

实现位置：onNext 回调函数 #

Bootstrap Wizard provides an onNext callback that fires right after the NEXT button is clicked, but before the tab switches. This is the perfect spot to run your validation checks because it lets you block the tab transition if fields are empty.

具体实现方法 #

Here's a step-by-step breakdown with code examples:

1. Hook into the onNext event during wizard initialization
   When you set up your Bootstrap Wizard, add the onNext option to your configuration object.

2. Fetch and validate your field values
   Inside the onNext function, grab the values from your player_name input and level dropdown, then check if they're empty (don't forget to trim whitespace from the input to catch empty spaces!).

3. Block or allow tab transition
   If any required field is empty, show a user-friendly message and return false to prevent the tab switch. If all fields are filled, return true to let the wizard proceed.

Full Code Example #

// Initialize your Bootstrap Wizard with validation logic
$('#your-wizard-id').bootstrapWizard({
    // Other wizard config options go here (like tab names, etc.)
    onNext: function(tab, navigation, currentIndex) {
        // Get field values (adjust selectors to match your HTML)
        const playerName = $('#player_name').val().trim();
        const selectedLevel = $('#level').val();

        // Validate required fields
        let isValid = true;
        
        // Reset any previous validation states (optional but clean)
        $('#player_name, #level').removeClass('is-invalid');

        if (!playerName) {
            $('#player_name').addClass('is-invalid');
            isValid = false;
        }
        if (!selectedLevel) {
            $('#level').addClass('is-invalid');
            isValid = false;
        }

        if (!isValid) {
            // Show a user-friendly error (replace with Bootstrap toast/alert for better UX)
            alert('Please fill out all required fields on this tab before proceeding!');
            // Return false to block tab transition
            return false;
        }

        // Validation passed—allow navigation to next tab
        return true;
    }
});

Extra Tips #

• Target specific tabs: If you have multiple tabs and only need validation on the first one, use the currentIndex parameter to check which tab the user is on (e.g., if (currentIndex === 0) { ... run validation ... }).
• Better error messaging: Instead of a basic alert, use Bootstrap's built-in form validation styles (like the is-invalid class we used) and add error text elements next to your fields for a more polished look.
• Dynamic fields: If your fields are added dynamically, make sure your selectors still target the correct elements (since we're fetching values on button click, it should work as long as the elements exist when NEXT is pressed).

内容的提问来源于stack exchange，提问作者Mae Cana