jan-vince/smallcontactform

Bootstrap 5 validation / feedback does not work correctly

Closed this issue · 1 comments

SamBrishes commented

Hello,

I've two issues with the field validation using Bootstrap 5.

  1. Feedback is placed before the <input /> field
    In the current version the <small class="invalid-feedback"> [...] </small> message is placed before the <input ... /> field, which does not work due to Bootstraps .is-invalid ~ .invalid-feedback CSS selector rule.

  2. was-validated class on the <form> element destroys validation
    The was-validated class name on the <form> element resets the appearance of the form field validations. Thus, an .is-invalid field is no longer invalid, when :valid applies (which happens on many different cases, such as on custom validation rules).

I guess just "moving some things around" may breaks Bootstrap 3 based templates, but I didn't had time to test this yet.

Before:

step-1

After:

step-2

~ Sam.

PS.: Tested with OCv3 w/ Bootstrap 5.2 and Bootstrap 5.3.0-alpha1.

jan-vince commented

Hi @SamBrishes and thank you for your time.

But Small Contact Form has to work with Bootstrap 3 as I still use in on old sites.

As I move to Bootstrap 5 (slowly) I will maybe add an option to choose HTML template/formating, but i have no free time right now.