The form component is used to contain ns-inputters and manage their validations.
ns-form component is a wrapper for
ns-inputters. It's main purpose is to manage the validations of these
|💚 Do's||💔 Don'ts|
|Use ||Write your own validations|
|Use ||Rely on front end validation alone.|
- Alyways use the
ns-form, input and other form elements shouldn't be on their own.
- Speak with the Nucleus team for advice on experience patterns.
The ns-form component can be used in the following components:
|Validates all of the fields within the form and returns an object containing the field and validation data|
|Dispatched when the user tries to submit a form.|
|Will pass the object of the fields and validation when validate is called.|
The submit event is triggered in one of two ways:
- Clicking on ns-cta (without href attribute)
- Pressing enter when focused on an input
- Nested ns-forms will not dispatch the submit event to a parent ns-form
- The nsx-address selector will dispatch a submit event as it is a self contained experience.
You will need to set up a way to listen for the submit event. This can be done using via
onsubmit or using an event listener.
The returned event contains
event.detail.submitter - this is the element that triggered the ns-form submit.
Note: submitting the form does not trigger validation, this will need to be handled separately. See Validated below.
- This is only required if you need to listen for an event. The
validateattribute will pass back the same object.
An invalid validate return response looks like:
A valid validate return response looks like:
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.