[EuiFieldText] required prop validating immediately, not on blur

[j-m]

The required prop is violating the form usage guidelines

Validate on blur
Validation should occur on blur from an input field. The submit button should be active by default, then show errors after click. Error messages should be specific to the situation.

Here's a fork of the form validation sandbox

[j-m]

Appears to just be a styling issue, resolved with

.euiFieldText:not(:focus):invalid {
  background-image: none;
}
.euiFieldText:not(:placeholder-shown):invalid {
  background-image: linear-gradient(to top, #bd271e, #bd271e 2px, transparent 2px, transparent 100%);
}

Essentially just replacing

.euiFieldText:invalid {
    background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%);
    background-size: 100%;
}

with

.euiFieldText:not(:placeholder-shown):invalid {
    background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%);
    background-size: 100%;
}

[cchaos]

Yes, we intentionally override the invalid color with the focus color when the input is in focus. If validation only occurs onBlur then the invalid marker would continue to be present even if they've changed their input to be valid.

Appreciate the feedback here, but not something we will be changing as it was a conscious decision.

[j-m]

Apologies, the fork link was supposed to take you to a codepen.

Ignore focus, that was needed so my patch would work.
You'll see in the codepen that the first and second fields are invalid; all I've done is add the required prop to them.

[j-m]

@cchaos Reading your comments back, I think there was a misunderstanding here and believe this issue should be reopened.

To elaborate, if a field is required then EUI will immediately show it as invalid, even if the user hasn't attempted to enter anything.

[cchaos]

Unfortunately that's just how browser's interpret required on empty inputs. Here's a blank codepen showing the basic implementation: https://codepen.io/clhorn99/pen/bGBdbaV

And an explanation from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required#constraint_validation