提交表单时为空必填输入触发Popover？已尝试方案无效求助

Hey there! Let's break down why your popover isn't working and get it up and running properly. The main issue in your code is that you're trying to call jQuery's popover() method directly on a native DOM element—this won't work because popover is a jQuery/Bootstrap method meant for jQuery-wrapped elements. Here's how to fix it step by step:

Key Issues in Your Current Code #

• You’re using native DOM elements (requiredFields[i]) to call popover(), but this method only exists on jQuery objects.
• Your isValid variable starts as false, which is backwards—you should assume the form is valid initially, then mark it invalid if empty fields are found.
• You’re redundantly checking requiredFields[i].required again, since you already filtered the inputs to only include required ones.

Correct Solution Steps #

1. Ensure Dependencies Are Loaded Correctly #

First, make sure you have jQuery and Bootstrap (since popover is a Bootstrap component) loaded in the right order in your HTML:

<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Don't forget Bootstrap CSS for proper popover styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

2. Revised Validation Code #

Here's the fixed and optimized code:

// Wait for the DOM to fully load before running scripts
$(document).ready(function() {
    // Attach validation to the form's submit event
    $('form').on('submit', function(e) {
        let isValid = true;
        
        // Hide any existing popovers first to clean up previous errors
        $('input[required]:not(:disabled)').popover('hide');

        // Loop through all required, non-disabled inputs
        $('input[required]:not(:disabled)').each(function() {
            const $input = $(this);
            // Check if input value is empty (trim to ignore whitespace)
            if ($input.val().trim() === '') {
                // Initialize and show popover on the jQuery-wrapped input
                $input.popover({
                    title: 'Warning!',
                    content: 'Value can not be empty',
                    placement: 'bottom',
                    trigger: 'manual' // Control show/hide manually to avoid unwanted triggers
                }).popover('show');
                
                isValid = false;
                // Stop at the first empty field (remove this line if you want to show all errors at once)
                return false;
            }
        });

        // Prevent form submission if invalid
        if (!isValid) {
            e.preventDefault();
        }
    });

    // Optional: Hide popover when user starts typing in the field
    $('input[required]').on('input', function() {
        $(this).popover('hide');
    });
});

3. Explanation of Key Changes #

• jQuery Wrapping: We use $(this) to convert native DOM elements into jQuery objects, so we can safely call the popover() method.
• Manual Trigger: Setting trigger: 'manual' ensures the popover only shows when we explicitly call popover('show'), avoiding unexpected automatic displays.
• Popover Reset: We hide existing popovers before each validation run to prevent stale error messages from sticking around.
• Form Submit Handler: Attaching validation to the form's submit event is the standard way to run pre-submission checks.
• Input Event Listener: The optional listener hides the popover as soon as the user starts typing, making the experience more intuitive.

内容的提问来源于stack exchange，提问作者Ban Tot