Or add aria-invalid="false" in a field layout, when field is set to required. And validate.js will change it to aria-invalid="true" on editing.

But not is that is desired behavior? to always announce the field as invalid and required.

it is not invalid until it has been validated

currently its telling you "you made a mistake" before you have even done anything

Okay, then what about changing this

to:

$required ? 'required aria-invalid="false"' : '',

On initial render it will produce:

<input name="blabla" required aria-invalid="false" ...>

$required ? 'required aria-invalid="false"' : '',

There's more than that here. The aria-invalid should be set ONLY if the value is null

And you have focused into the field and then blurred. Not just because it's empty on page load

The problem is actually in the validation.js or better IS the validation.js. The script is just a rewrite of some script with origins before 2010. There are more modern scripts that will solve better the task in hand. I have one for my own use cases: https://formally-valid.dgrammatiko.dev

@dgrammatiko thanks for this information. Do you see a chance to introduce you solution in Joomla?

While the script from @dgrammatiko is good it is not a drop in replacement.

@brianteeman is right, it's not a drop in replacement. Someone needs to check if some kind of fallback could be written for the old validators but still there are expected changes in the form XMLs (probably a default could be used and extended/overridden in the XML definition to make it b/c). The short version is it needs a bit of investigation how (or even IF) this could be done in a minor version. The other option is to plan it for v5 in 15 months or so...

I spent some time on this. As the script is not a drop in replacement it couldnt be done until J5 but I am not 100 convinced that it should be even then. There are other scripts that do not require changing the xml on all the files which would be a better fit. They might not be as complete but they are much less time to implement for core and extensions

There are other scripts that do not require changing the xml on all the files which would be a better fit.

That's true but as I said if this is implemented with some default data-attr then not all fields would need entries. BTW the entries in the XML are the validation error messages, you can even skip the custom messages and let the browser provide whatever is the default per input. Most of the things are opt in, very few from all these attributes are the hard requirements, eg in the from element all these attributes are the default for Joomla/Bootstrap 5:

<form 
data-valid-class="is-valid"
data-invalid-class="is-invalid"
data-invalid-form-alert="true"
data-indicator="true"
data-indicator-position="after"
data-indicator-class="invalid-feedback">

The attribute data-indicator="true" controls if the form should use the custom or the browser error messages. If this is false then the input could be as simple as (same as is right now but there's no customised message :( )

    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
      </div>
    </div>
  </div>

There's a codepen live example

we really dont need to add the data-

we really dont need to add the data-

This decision is not up to me but having a way to provide your own error messages is kinda good foe the UX, forms could be way more approachable (maybe not for the backend)...