As part of my input validation process, I am utilizing popovers. However, I am struggling with the syntax to make it work as intended.
https://jsbin.com/sufitelodo/1/edit?html,js,output
The JSBin provided serves as the foundation for this issue.
I am unsure how to code the HTML for a hidden Bootstrap 5.2 popover that only appears when triggered within an if statement. To test this, input 0 into field A and any number into fields B and C. The first error should occur when A equals 0, then change A to a non-zero value; the second error should trigger when submitting with B equaling C. My goal is to replace the alert boxes with popovers.
const popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, { html: true });
});
document.getElementById("button").addEventListener("click", testMe);
function testMe() {
let inputA = parseFloat(document.getElementById("aInput").value);
let inputB = parseFloat(document.getElementById("bInput").value);
let inputC = parseFloat(document.getElementById("cInput").value);
let popoverTest1 = document.getElementById("popoverTest1");
let popoverTest2 = document.getElementById("popoverTest2");
if (inputA === 0) {
// Make popoverTest1 come up here
//alert("This is when popoverTest1 should fire");
bootstrap.Popover.getOrCreateInstance('#popoverTest1').show()
return false;
} else if (inputB === inputC) {
// Make popoverTest2 come up here
//alert("This is when popoverTest2 should fire");
bootstrap.Popover.getOrCreateInstance('#popoverTest2').show()
return false;
}
}
document.getElementById("close1").addEventListener("click", closePop);
function closePop () {
bootstrap.Popover.getInstance('#popoverTest1').hide();
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca9b2aeb2af">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<label for="aInput">A Input</label>
<input type="number" id="aInput">
<span id="popoverTest1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-trigger="manual"
data-bs-content="Top popover"
data-bs-title='This is zero <a href="" id="close1">x</a>'
data-bs-content='Change it to something non-zero'>
</span>
<br><br>
<label for="bInput">B Input</label>
<input type="number" id="bInput">
<span id="popoverTest2"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-trigger="manual"
data-bs-content="Top popover"
data-bs-title="This is the same as Input C"
data-bs-content="Change it so it's not the same as Input C">
</span>
<br> <br>
<label for="cInput">C Input</label>
<input type="number" id="cInput">
<button type="button" class="btn btn-warning" id="button">Hit Me</button>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f64786479">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jL6+MDMPddm/YxR/OVnSoWDVa" crossorigin="anonymous"></script>Instead of using alerts, I would like to implement cleaner popovers from Bootstrap. Unfortunately, despite trying to comprehend the documentation, I am still unable to get them functioning properly. Additionally, after the popover displays, it should be able to close upon user action.
I attempted using
data-bs-trigger="focus"Thank you for your assistance in solving this challenge.
*** Edit - I have made updates to the code to simplify usage with Vanilla, however, there seems to be an issue with closing the popover using the designated button... I cannot figure out how to dispose of it.