You might have noticed that both
validators make use of the
extend property in the configuration for
createForm. This is because both of these make use of Felte's extensibility. We will call any package that extends Felte an
extender from now.
extender is a simple function that gets called when
createForm is called, when the
form action is called and whenever the form changes.
formrefers to the HTMLFormElement of the form you're handling. This is not available during the
controlsrefer to the the form controls of the form that are handled by Felte. This is not available during the
stageis a string that denotes the current stage of the form. Possible values:
datais an observable that contains the values of the form.
errorsis an observable that contains the errors of the form.
warningsis an observable that contains the warnings of the form.
touchedis an observable that contains the touched values of the form.
isValidis an observable that contains a boolean showing if the form is valid.
isValidatingis an observable that contains a boolean showing if validations are running.
isSubmittingis an observable that contains a boolean showing if the form is submitting.
isDirtyis an observable that contains a boolean showing if the user has interacted with the form.
interactedis an observable that contains either
nullor a string with the name of the last field the user interacted with.
configis the configuration object passed by the user to
addValidatoris a function that accepts a validation function to add to the user's
warnconfiguration. Optionally accepts an object as second parameter with the following properties:
debounceis a boolean. If
true, adds to debounced validators. Default:
"error". Defines if the validator should be added to
addTransformeris a function that accepts a transform function to add to the user's
setFieldsis the same setter described in the Helper functions section.
validateis the same helper described in the Helper functions section.
resetis the same helper described in the Helper functions section.
handleSubmitis a function that triggers a form submission.
createSubmitHandleris the same helper descriped in the Helper functions section.
If you're subscribing to any store, or adding any event listeners in the extender, you will want to unsubscribe and/or remove any event listeners in the
destroy function that you can return from the extender. If you're not using any events or subscribing to any store, you don't need to set this.
If you want to perform an action whenever there are errors on a
submit event (e.g. server validation), you can handle them in the
onSubmitError function. This will receive the current values contained in the
You may check Felte's repo and go over any validator or reporter source code. You'll find they're quite simple.
NOTE: If you check the
validatorpackages you'll notice that you can change the signature of the configuration object for
createFormin order for it to be used by your extender.