How to show popover on the empty input on the submit?-CodePudding

NOTE: I googled it before asking a question in here.

I am currently checking the input before submitting the form, I want to show a popover on the top of the input if the value of input is empty for the purpose that the user might miss the empty required fields.

Now, I tried this solution I found here in stackoverflow jquery show popover if input's value is empty to my code. and it does not do anything and no error on the console.

Here is my code:

                const inputs = document.querySelectorAll('input');

                const requiredFields = Array.from(inputs).filter(input => input.required);

                var counter = 0;
                var isValid = false;

                for (let i = 0; i <= requiredFields.length - 1; i  ) {
                    //skip if the field is disabled
                    if (!requiredFields[i].disabled) {
                        //check the field if required (the input field should be set to `required`)
                        if (requiredFields[i].required) {
                            //check if the value is not null
                            if (requiredFields[i].value === '') {

                                //Show popover 
                                requiredFields[i].popover({
                                    title: 'Warning!',
                                    content: 'Value can not be empty',
                                    placement: 'bottom'
                                }).popover('show');
   
                                isValid = false;
                                break;
                            }
                        }
                    }
                    counter  = 1;
                }

How can I possibly trigger the popover when the input value is empty? Can someone lead me to correct way to solve this?

Regards,

CodePudding user response：

It seems that you are using JavaScript to check for empty input fields, but the code you provided doesn't include a library for the popover functionality. The popover method you're trying to use is from the Bootstrap framework.
In order to use this method, you need to have Bootstrap and jQuery included in your project. Once you have these libraries added, you can use the popover() method on an element as shown in your code.
Here is an example of how you can add Bootstrap and jQuery to your project and call the popover() method correctly:

Include the following code in the head section of your HTML file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Then you can call the popover() method as shown in your code:

requiredFields[i].popover({
    title: 'Warning!',
    content: 'Value can not be empty',
    placement: 'bottom'
}).popover('show');

Please make sure that the order of the library is correct and there should not be any conflicts with other libraries.
Additionally, if you are going to submit your form, it is a good practice to check for empty fields before the form is submitted. If you are using a javascript Framework like jQuery, you can use jQuery's on method.

or check this way,

The problem might be that you are trying to attach the popover to the input field rather than an element (like a button) that can actually trigger the popover. The popover method from bootstrap is to be used with an element that you want to trigger the popover, then you can use the data-* attributes to set the options for the popover.
Here is an example of how you can attach the popover to an element and trigger it when the input value is empty:

<div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" required>
    <div id="popover-container" >
        <div id="popover-content">Value can not be empty</div>
    </div>
</div>

const inputs = document.querySelectorAll('input');
const requiredFields = Array.from(inputs).filter(input => input.required);

for (let i = 0; i <= requiredFields.length - 1; i  ) {
    // check the field if required (the input field should be set to `required`)
    if (requiredFields[i].required) {
        requiredFields[i].addEventListener('blur', e => {
            // check if the value is not null
            if (e.target.value === '') {
                const popover = document.querySelector('#popover-container');
                popover.classList.remove('d-none');
                e.target.parentNode.appendChild(popover);
                e.target.setAttribute("data-content", "Value can not be empty")
                $(e.target).popover("show");
            } else {
                const popover = document.querySelector('#popover-container');
                popover.classList.add('d-none');
                $(e.target).popover("hide");
            }
        });
    }
}

In this example, the popover is attached to a container element which is initially hidden