Invalid Field Indicators on Submit Attempt 🧪

Here's an example in which the invalid indicators only appear when the submit is attempted.

• Invalid fields "shake"

  • And finish with a red outline

Attributes

CONCEPTUAL.

wfu-form-validate-type = shake

on the form

wfu-form-validate-field

Used to identify a group

Usage Notes

In general, the label and field need to be grouped so that they can "shake" together.

Example

    <form id="sampleForm" novalidate>
      <div class="form-group">
        <label for="field1">Name (Required Text):</label>
        <input type="text" id="field1" name="field1" required>
      </div>
      <div class="form-group">
        <label for="field2">Email (Required Email):</label>
        <input type="email" id="field2" name="field2" pattern="[a-z]+@[a-z]+\.[a-z]{2,}" required>
      </div>
      <div class="form-group">
        <label for="field3">Code (Exactly Two Letters Required):</label>
        <input type="text" id="field3" name="field3" required pattern="^[A-Za-z]{2}$" placeholder="e.g., AB">
      </div>
      <div class="form-group">
        <label for="phone">Phone (US Format):</label>
        <input type="tel" id="phone" name="phone" required pattern="^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$" placeholder="e.g., 123-456-7890">
      </div>
      <button type="submit" id="submitButton">Submit</button>
    </form>

https://codepen.io/memetican/pen/ByBqYJr/2911b074f1ed2bcff6885f29ea6d59f7

Notes

Some field types like tel behave a bit differently;

• Special input on mobile devices

• The pattern requirement is ignored or handled differently, it won't trigger validation

We handle this as a secondary validation in SA5