HTML5 default validation error bubbles

[sirschuyler]

Bug Report

User Story

As a donor, I want see consistent errors so that I trust the site and am not confused by mismatched error types.

Details

HTML5 form validation of "Personal Information" fields (give-first, give-last, give-email) displaying default validation bubbles in browser.

Current Behavior

HTML5 form validation of "Personal Information" fields (give-first, give-last, give-email) displaying default validation bubbles in browser.

Expected Behavior

Validation of "Personal Information" fields (give-first, give-last, give-email) do NOT display default HTML5 validation bubbles, instead Give's custom validation errors are shown as they typically are (see Safari which does not prevent submit or display HTML5 default validation bubbles).

Bug Type

• [ ] This bug describes functionality that once worked as expected in version X.X.X.
• [ ] This bug describes functionality that never worked as expected.
• [x] I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Use a modern browser other than Safari and try to submit form with empty or invalid fields for "Personal Information" fields (give-first, give-last, give-email)
2. See default HTML5 validation bubbles appear

Visuals

Possible Solution

give.js line 2500 (when formatted in browser) change (&&) if ("function" != typeof o.checkValidity || !1 !== o.checkValidity() || (i.fadeOut(), !1 != (-1 != navigator.userAgent.indexOf("Safari") && -1 == navigator.userAgent.indexOf("Chrome")))) { to (||) if ("function" != typeof o.checkValidity || !1 !== o.checkValidity() || (i.fadeOut(), !1 != (-1 != navigator.userAgent.indexOf("Safari") || -1 == navigator.userAgent.indexOf("Chrome")))) {

Related

Acceptance Criteria

• [ ] Give's validation errors appear when an invalid form is submitted.
• [ ] HTML5 validation error bubbles do not appear when an invalid form is submitted.
• [ ] Fixing behavior does not affect proper validation of "Personal Information" fields or accepting donations.

Environment

Operating System

• Platform: Mac OS X
• Version: 10.14.6

Browser

• Name: Chrome
• Version: 83.0.4103.61
• Name: Firefox
• Version: 77.0

WordPress System Info

• WordPress - Version: 5.4.1
• Give - Donation Plugin - Version: 2.6.3

[jonwaldstein]

@sirschuyler thanks for your suggestion.

The current donation forms are using the html input required attribute for simple front-end validation. Along with that we validate on submission which adds the GiveWP error notices like below:

At this time we don't have plans to improve this experience. We do however have plans to improve donation forms overall in the future with a more modern approach that will have much more consistent error handling. Closing this for now, but stay tuned for what the future has in store!