Examples

Examples with common form validation scenarios.

Password validation

Reload

HTML

<form action="/submit">
  <input
    type="password"
    required
    minlength="8"
    pattern="^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[1-9])(?=.*[\$\@$\!\%\*\#\?\&\-]).+$"
    validation-message="#error"
    message-value-missing="Password is required"
    message-too-short="Must be at least 8 characters"
    message-pattern-mismatch="Must contain capital letter, lowercase letter, number and a special character"
  />
  <div id="error" class="error-box"></div>
  <button>submit</button>
</form>

CSS

input[data-dirty]:invalid {
  border-color: #e60202;
  outline: #e60202 solid 1px;
}

.error-box {
  color: #e60202;
}

.error-box:empty {
  display: none;
}

Repeat password

Reload

HTML

<form action="/submit">
  <label for="password">
    Password
  </label>
  <input
    id="password"
    type="password"
    required
    validation-message="#password-error"
    message-value-missing="Password is required"
  />
  <div id="password-error" class="error-box"></div>

  <label for="repeat-password">
    Repeat password
  </label>
  <input
    id="repeat-password"
    type="password"
    required
    pattern-value="#password"
    validation-message="#repeat-error"
    message-value-missing="Please repeat password"
    message-pattern-mismatch="Repeated password be the same"
  />
  <div id="repeat-error" class="error-box"></div>
  <button>submit</button>
</form>

CSS

input[data-dirty]:invalid {
  border-color: #e60202;
  outline: #e60202 solid 1px;
}

.error-box {
  color: #e60202;
}

.error-box:empty {
  display: none;
}

Optional field

TODO

URL validation

TODO

4-digit PIN

TODO