Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

was-validated should not override is-invalid

See original GitHub issue

When form is validated (was-validated) fields with error (is-invalid) shows green border with green check.

As documentation reads javascript should not override server side validation.

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

sample

bootstrap version: 4.5.3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>was-validated should not override is-invalid</title>
</head>
<body>
  
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-4">
      <label for="validationCustom03">needs-validation</label>
      <input type="text" class="form-control is-invalid" value="x" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
  </div>
</form>
  <hr />
<form class="was-validated" novalidate>
  <div class="form-row">
    <div class="col-4">
      <label for="validationCustom03">was-validated</label>
      <input type="text" class="form-control is-invalid" value="x" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
  </div>
</form>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

timvercommented, Nov 16, 2022

Same issue here:

The .form-control.is-invalid selector does not carry enough weight and becomes “valid” by the .was-validated .form-control:valid state.

Replacing the is-invalid with is-valid makes no sense to me as I put it there. Stating that those classes are for backend sounds nice, but in practice it gives false feedback. So to me this is also a bug.

/* dirty override caused by ".was-validated .form-control:valid" outweighing ".form-control.is-invalid" */
.form-control {
    &:valid {
        &.is-invalid {
            background-image: escape-svg($form-feedback-icon-invalid);
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.375rem) center;
            background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
            border-color: $form-feedback-invalid-color;
            padding-right: calc(1.5em + 1.5rem);

            &:focus {
                border-color: $form-feedback-invalid-color;
                box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
            }
        }
    }
}

0reactions

Seraffimocommented, Oct 19, 2022

@mdo Curious why this was closed. Agree with both @fhughes90 and @matejskubic

The specific issue for me occurs on a form used in an AJAX POST. I have a date field that I want to validate on the server side. Client side validation is not required for this form element (type=“text”). I have five other elements in the form that require client side validation. When all form elements pass client validation, all six elements are marked as valid (e.g. was_validated on form triggers styling) and the POST is submitted. If the date field has an error as noted on the server, the date field classList has (is-invalid) added and in my case the

<div id="id_trade_view_fromdtTooltip" class="invalid-tooltip">
     Enter a valid date.
</div>

is triggered.

However, the original client side validation remains. In the same way client side validation can selectively mark invalid fields, the same option should be available if an individual field needs server side validation. Maybe there is a way to do this, but I do not see how. i.e. is-invalid should be equivalent to client side validation :invalid.

Top Results From Across the Web

How to disable bootstrap 4 validation style from valid controls

You can override css of the is-valid validation. When you right click on the green check box and choose ...

Validation · Bootstrap v5.0

Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> . Otherwise, any required field without a...

Bootstrap Validation - examples & tutorial

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server-side validation. They do not require a .was-validated...

How to Validate Forms with Bootstrap 5 - Designmodo

The .is-valid and .is-invalid classes may still be used instead of the ... the .was-validated class to the form tag even without the...

Native HTML5 form validation - React-Bootstrap

was-validated class, usually applied to the <Form> (you can use the validated prop as a shortcut). Otherwise, any required field without a value...