Bootstrap form validation issues

Question

Bootstrap form validation issues

Currently, I am utilizing Vue.js along with Bootstrap for the creation of a website. In this process, I have set up a form on which I am implementing my custom validation logic. Everything seems to be functioning correctly until the moment when the user hits the submit button and the was-validated class is added to the form as per Bootstrap guidelines.

The issue arises at this point, where any required input field with any input - regardless of whether it validates based on my custom logic or not - is marked as valid, displaying a green border and check mark. Interestingly, my custom validation still runs in the background and shows the error message using b-form-invalid-feedback. However, it appears that the was-validated class considers fields with the required property as valid without factoring in my custom validation, resulting in conflicting validation scenarios. A field could have a green check mark due to meeting the required property, yet still display an error because it doesn't pass my custom checks.

I have attempted to remove the :valid style; however, this didn't produce the desired effect as I do want those styles to show up when the field satisfies my custom validation criteria. If this explanation is unclear, I can provide visuals for better understanding. Additionally, there is another issue I encountered - a date picker that fails to trigger the appearance of b-form-invalid-feedback even after adding was-validated.

Snippet of My Code

<b-form @submit.prevent="addReview" name="review-form" novalidate>
  <div class="name">
    ...
  </div>

  ...
  
  <div class="description">
    ...
  </div>

  <b-button type="submit">Save</b-button>
</b-form>
...

Computed Properties and Methods Used

computed: {
        emailStateValidation() {
            ...
        },
        domainStateValidation() {
            ...
        },
    },
    methods: {
        emailIsValid() {
            ...
        },
        domainIsValid() {
            ...
        },
        isStateValid(variable) {
            ...
        },
        addReview() {
            ...
        ...

Specific Questions:

How can I resolve the conflict between the required attribute and my custom validation to prevent premature marking of input fields as valid?
Why is the b-form-invalid-feedback not showing up on the datepicker component upon form submission if a date is not selected?

javascript twitter-bootstrap vue.js bootstrap-4 vue-cli

Answer 1

Answer №1

To simplify, take out the novalidate attribute from the <form> in your Vue template. When you include novalidate, the input fields will retain their :valid status until you explicitly use setCustomValidity. Functional Sandbox

Additionally, because Bootstrap styles both the :valid and :invalid states of inputs, even if custom validators mark inputs as invalid, styles for both valid and invalid states will be applied such as :valid and .is-invalid. It seems that the :valid styles take precedence due to the structure of the Bootstrap stylesheet.

A̶v̶o̶i̶d̶ ̶u̶s̶i̶n̶g̶ ̶̶n̶o̶v̶a̶l̶i̶d̶a̶t̶e̶̶ ̶w̶h̶e̶n̶ ̶y̶o̶u̶ ̶a̶r̶e̶ ̶i̶m̶p̶l̶e̶m̶e̶n̶t̶i̶n̶g̶ ̶a̶ ̶f̶u̶l̶l̶ ̶v̶a̶l̶i̶d̶a̶t̶i̶o̶n̶ ̶s̶y̶s̶t̶e̶m̶ ̶y̶o̶u̶r̶s̶e̶l̶f̶ ̶i̶n̶c̶l̶u̶d̶i̶n̶g̶ ̶t̶h̶e̶ ̶̶r̶e̶q̶u̶i̶r̶e̶d̶̶ ̶v̶a̶l̶i̶d̶a̶t̶o̶r̶.̶

In relation to Bootstrap, it is preferable not to utilize novalidate since it applies styles to both :valid and :invalid states of input elements.

This may lead to browser popups prompting users to fill specific fields which could be undesirable.

Recommendation: Utilize the validated prop on your form and connect it to the form's state, setting it to true in the addReview() function. This will automatically add the was-validated class without the need to directly manipulate the DOM.

UPDATE: By removing novalidate, browser validation is enabled, causing the submit event to no longer trigger on the form. Consequently, the was-validated class is not added. To address this issue, I have adjusted the sandbox to propose a solution by binding the click event to the submit button for validation logic, while using the submit event for actions following successful validation.

Datepicker Update: The reason why the datepicker was always considered valid was due to an error in the isStateValid() method, specifically in the following section:

if(variable) { // "" evaluates to false
   // ...
}

As "" evaluates to false, it will consistently return null. The remedy involves combining the suggestion above regarding maintaining the validated state for the form. Instead of checking if(variable), we now verify if(this.validated) and if it is true, we proceed to evaluate the length and return either true or false.

Answer 2