EXPERIMENTAL
Utilities for a more customized display of form validity.
Note: the basic validity of input fields can be defined with the
:invalid and :validate attribtues
of reacl-c-basics.forms.core/input etc.
Note: the validation message for native validations (:pattern,
:required etc) can be modified by using setCustomValidity in
:onInvalid events depending on the validity property.
For visual styling there are the :required and :options CSS
pseudo-classes, as well as :valid and :invalid.
For showing validation problems differently than the browser does by
default, use with-validity and the derived
utils form-with-validity or append-validity.
To trigger the display of validation problems before submitting a
form, use report-validity!.
See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation
EXPERIMENTAL Utilities for a more customized display of form validity. Note: the basic validity of input fields can be defined with the `:invalid` and `:validate` attribtues of [[reacl-c-basics.forms.core/input]] etc. Note: the validation message for native validations (`:pattern`, `:required` etc) can be modified by using `setCustomValidity` in `:onInvalid` events depending on the `validity` property. For visual styling there are the `:required` and `:options` CSS pseudo-classes, as well as `:valid` and `:invalid`. For showing validation problems differently than the browser does by default, use [[with-validity]] and the derived utils [[form-with-validity]] or [[append-validity]]. To trigger the display of validation problems before submitting a form, use [[report-validity!]]. See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation
(append-validity item f)(append-validity attrs item f)A div item with the given child item (which should usually be an
input element), followed by (f validation-msg reset-action) where
validation-msg is any validation error in that input element.
A div item with the given child item (which should usually be an input element), followed by `(f validation-msg reset-action)` where `validation-msg` is any validation error in that input element.
(check-validity! ref)Checks whether the referenced form or input element is valid. If not, the browser fires a cancelable invalid event at the element, and this effect returns false.
Checks whether the referenced form or input element is valid. If not, the browser fires a cancelable invalid event at the element, and this effect returns false.
(div-with-validity f)(div-with-validity attrs f)A div item with contents (f validation-msg reset-action), where
validation-msg is nil or the description of validation errors in
one of the contained input elements.
A div item with contents `(f validation-msg reset-action)`, where `validation-msg` is nil or the description of validation errors in one of the contained input elements.
(form-with-validity f)(form-with-validity attrs f)A form item with contents (f validation-msg reset-action), where
validation-msg is nil or the description of validation errors that
prevent the forms from being submitted.
A form item with contents `(f validation-msg reset-action)`, where `validation-msg` is nil or the description of validation errors that prevent the forms from being submitted.
(prepend-validity f item)(prepend-validity attrs f item)A div item with the given child item (which should usually be an
input element), prepended with (f validation-msg reset-action)
where validation-msg is any validation error in that input
element.
A div item with the given child item (which should usually be an input element), prepended with `(f validation-msg reset-action)` where `validation-msg` is any validation error in that input element.
(report-validity! ref)Like check-validity!,
but validation errors are also shown to the user. The browser will
show them natively in a popup, or you can customize the visual
presentation with with-validity. This will automatically be
called when the user tries to submit a form.
Like [[check-validity!]], but validation errors are also shown to the user. The browser will show them natively in a popup, or you can customize the visual presentation with [[with-validity]]. This will automatically be called when the user tries to submit a form.
(validation-message ref)Gets the current validation message from a reference to a form or input element.
Gets the current validation message from a reference to a form or input element.
(with-validity f)An item that will call (f attrs validation-msg reset-action), where
attrs contains and :onInvalid event handler that must be used in a
form, input element or anything that contains input
elements. validation-msg will then be non-nil when form validation
fails and the problem should be displayed to the user. You can emit
'reset-action' to reset the validation message to nil.
This turns off the default behaviour of the browser to show these messages.
An item that will call `(f attrs validation-msg reset-action)`, where attrs contains and `:onInvalid` event handler that must be used in a form, input element or anything that contains input elements. `validation-msg` will then be non-nil when form validation fails and the problem should be displayed to the user. You can emit 'reset-action' to reset the validation message to nil. This turns off the default behaviour of the browser to show these messages.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |