I am currently using bootstrap version 5.2.3 and I have encountered an issue where the modal opens regardless of validation rules being met or not.
I attempted to modify the data-bs-toggle and data-bs-target attributes using Vue.js, but the changes did not achieve the desired outcome. Even after exploring documentation and various suggestions online, including jQuery solutions, I have been unable to successfully run a validation method before opening the modal with data-bs attributes only if validation is passed.
Below is a snippet of the template:
// button triggering modal
<button
type="button"
@click="validate()"
class="submitBtn"
:data-bs-toggle="isValidFirst ? 'modal' : ''"
:data-bs-target="isValidFirst ? '#popup' : ''"
>
<p>Save</p>
</button>
// modal dialog
<div
class="modal fade"
id="popup"
tabindex="-1"
aria-labelledby="popupLabel"
aria-hidden="true"
>
This is the content inside the modal.
</div>
And here is a snippet of the script part:
validateFirstStep() {
if(!this.userId) this.isValidFirst = false;
if(!this.userName) this.isValidFirst = false;
if(this.isValidFirst) {
this.submitData();
}
},
The attempt was made to change the values of data-bs-toggle and data-bs-target as Vue data properties that are updated based on a boolean variable set by the validation method. However, despite these modifications, the modal failed to appear when expected.
Even attempts such as using `modal.show()` did not yield the desired result.