Skip validation feedback on certain Bootstrap 4 inputs

Question

By following Bootstrap's docs on form validation, I can validate my forms, but I haven't found a way so that specific fields (e.g. a text input or a checkbox) don't show validation feedback while all of the others do.

What I mean is: how can I make that some specific fields either skip getting the :valid or :invalid pseudoclasses when the form is validated, or even if they do get the pseudoclasses applied to them, how can I skip them from being visually formatted as the other fields?

Maybe there is a class that acts as the opposite of .was-validated that can be applied to specific fields?

Bootstrap version: v4.0.0-beta.3

Air

Do you have the "required" on all the form fields? – Translatable

@Translatable nope. The fields that are not marked as required are actually the ones that I don't want to color green when validating the form. – Air

Here's the related question asked on github. github.com/twbs/bootstrap/issues/25374 – Appall

I have the same issue. I have a "remember me" checkbox on a login form where it is inappropriate to color that green, validation simply shouldn't look at it – Barthol

Same problem here! It seems to me as such an essential thing to have included in Bootstrap. Any updates on how to do it in 2021? Bootstrap 5.1 doesn't seem to have a solution for that, as far as I can tell. Unfortunately Rafaels answer didn't work for me. – Werner

Answer 1

Because not required fields are valid by default You can make an override :valid pseudo class by adding to input .form-control a class ex.: no-validate

If you are using npm and you are importing boostrap you can use bootstrap variables

.form-control.no-validate:valid {
    border-color: $input-border-color;
    padding: $input-padding-x;
    background: $input-bg;
}

If not, you can just add default values:

.form-control.no-validate:valid {
    border-color: #ced4da;
    padding-right: .75rem;
    background: none;
}

Guitarist

I managed to use this to turn off the unecessary validation of the bootstrap-table plugin's "search-input" table filters. Brilliant! – Came

Answer 2

Not required form fields has a pseudoclass :valid. So if you add class .was-validated to your form, all of them will be highlighted as valid.

To highlight only requered fields you should not use default validation but check only neccessary fields like this:

if ($(this).val() != "" && $(this).prop("validity").valid) {
  $(this).addClass("is-valid");
} else {
  $(this).addClass("is-invalid");
}

If you use bootstrap4, it will highlight these fields properly after code is executed.

You can examine it on JSFiddle

Rebellious

Answer 3

I've got the task from my customer not to mark empty non-required fields. On the other hand I had to combine frontend with backend validation to prevent hacks and for ease of validation against a database.

Following example is based on BS4, thymeleaf and was inspired by @ksiger's idea in his JSfiddle (see above), but had to be modified to match with my criteria.

So, first lets inspect the form (mind the class):

 <form id="myForm" action="#" th:action="@{/formurl}" th:object="${myForm}"
       method="post" novalidate class="needs-custom-validation">

For validation, I am working with "is-valid" and "is-invalid" classes only. Let's have a look at the jQuery stuff:

$(function () {
    // validate field on change
        $(':input').change(function (event) {
            var isValid = checkField(this);
            // ... I'm doing something here ...
            return isValid;
        });

    // check field validity
        checkField = function (fld) {
            var isRequired = $(fld).prop('required');
            var isValid = $(fld).prop("validity").valid;
            var isEmpty = $(fld).val() == "";
            $(fld).removeClass("is-valid").removeClass("is-invalid");
            if (isValid) {
                if (!isEmpty)
                    $(fld).addClass("is-valid");
                return true;
            } else {
                $(fld).addClass("is-invalid");
                return false;
            }
        }

        /* form validation */
        checkForm = function (f) {
            var isValid = true;
            $(f).find("input, textarea, select").each(function () {
                isValid = checkField(this) && isValid; // "&&" is shortcut
            });
            return isValid;
        }

        $('[class="needs-custom-validation"]').submit(function (event) {
            if (!checkForm(this)) {
                event.preventDefault();
                event.stopPropagation();
                return false;
            }
            // call ajax here or let it bubble to the submit button
        });
});

That's the whole magic.

Dodie

Answer 4

You can add .was-validated to the parent element of the input where you want to display the validation.

For example, if you are placing inputs inside a div with the .form-group class, you can do:

 <div class="form-group was-validated">
   <label for="formGroupExampleInput">Example label</label>
   <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>

The validation styles apply if any parent element has the .was-validated class, it doesn’t matter whether the parent with the .was-validated class is a form. I can’t see it documented but it will change as the Bootstrap CSS avoids targeting specific HTML elements.

Cohbert

This automatically adds the validation visual. OP is trying to exclude from the visual, which is essentially the opposite of what you're recommending. – Alaska

BobbyScon is 100% correct, that's the opposite visually of what the person wants – Barthol

Answer 5

Try add formnovalidate="formnovalidate" to the submit button. This will skip the required attribute and allow you submit with any bootstrap validation.

Glabrous

The asker does not want to skip validation on the form. They want to skip visual feedback on certain item. – Barthol