is-(in)valid doesn't seem to work at all

<form action="" class="was-validated">
  <input type="text" class="form-control is-invalid">  
</form>

:valid seems to have higher priority over is-invalid, hence the input is green. I have a piece of JavaScript which decides if the input is valid or not, and adds this class.

• Operating system and version: macOS High Sierra
• Browser and version: Google Chrome
• Reduced test cases and potential fixes: https://jsfiddle.net/fxxrqd13/

Related: https://stackoverflow.com/q/47427827/1420197 Related issue: #24743

[IonicaBizau]

@mdo I understand that, but how can we combine them?

My use case is that I use .was-validated on the form, and call the checkValidation() method, except one field has custom validation (I want to add is-(in)valid classes there).

[mdo]

The docs are pretty clear on this—.was-validated for is for live HTML5 validation in the browser while the classes .is-valid and .is-invalid are for custom validation you’d setup. In your latest fiddle, you were still using the class on the input when you should be using the required attribute.