Custom Validity#

Demo#

Explanation#

The expression passed into the data-custom-validity attribute is evaluated and the result is used as the custom validity message for the input. If the result is an empty string, the input is considered valid. If the result is a non-empty string, the input is considered invalid and the string is used as the custom validity message.

Note that the signal bar must be defined before it is referenced in the data-custom-validity attribute expression.

<form data-signals-bar="" data-on-submit="@get('/endpoint', {contentType: 'form'})">
  <input data-bind-foo data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'" name="foo" required />
  <input data-bind-bar name="bar" />
  <button>
    Submit form
  </button>
</form>