HTML validation enough?

Always re-validate on server. Client checks are for UX only.

Disable native bubbles?

Use novalidate on form and build custom UI, which is more work.

type=email has built-in rules; pattern is for custom regex.

Browser shows bubbles on submit.

Form

Try submit empty or invalid email.

<input type="email" required>
<input pattern="[A-Za-z]{3,}" title="At least 3 letters">

Highlight fields after blur/submit.

Field

Invalid when empty after touch.

input:user-invalid {
  border-color: #dc2626;
  outline-color: #dc2626;
}

Override message for one field.

Custom

Only OK clears error.

input.setCustomValidity('Choose another username');
input.reportValidity();

HTML validation enough?: Always re-validate on server. Client checks are for UX only.
Disable native bubbles?: Use novalidate on form and build custom UI, which is more work.
pattern vs type=email?: type=email has built-in rules; pattern is for custom regex.