Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions

View File

@@ -0,0 +1,123 @@
---
title: Form Validation
hide_title: true
---
# Form Validation
After adding the module to your project you will have access to the new **Validate** node. You can find this node in the node picker.
## Basic Usage
Validating user inputted data in forms and other input fields are a recurring and often tedious process. This module provides a [Validate](/library/modules/validation/validate) node with a set of neat tools to make this easier.
First let's take a look at a very basic example.
<div className="ndl-image-with-background xl">
![](/library/modules/validation/simple-validate.png)
</div>
Here we introduce the **Validate** node and we will use it to validate a simple input field. Using the **Validate** node you create a _schema_ for the inputs that you want to validate, this schema is a property of the **Validate** node.
<div className="ndl-image-with-background xl">
![](/library/modules/validation/schema-property.png)
</div>
You edit the schema script by clicking the edit button. The simple schema for this example looks something like this:
```javascript
schema({
Name: string().required('Must provide name.'),
})
```
This schema has one property **Name** that must be a string and it is required. Each property in the schema will create an input on the **Validate** node. The error message can be provided, so if the validation fails that error message is sent on the **Name Error** output.
This will result in the following. If there is no _non empty_ string provided on the **Name** input the **Name Error** will output "Must provide name."
<div className="ndl-image-with-background xl">
![](/library/modules/validation/simple-validate-1.png)
</div>
## A bit more advanced
So that's a very basic example. Now let's take a look at one a little bit more involved.
<div className="ndl-image-with-background xl">
![](/library/modules/validation/sign-up-example.png)
</div>
This example has the following _schema_ script:
```javascript
schema({
Name: string().required('Must provide name'),
Email: string().required('Must provide email').email('Must be valid email'),
})
```
It's not much more complicated, it has an additional property **Email** that is both require and needs to be a valid email, with provided error messages.
A few notes on this example:
- The **Validate** nodes **Enabled** input can be used to control if the validation should run or not. If it doesn't run it will not emit any error messages. This is connected to a **Switch** node that is false by default and when the save button is clicked it enables the validation. This a common wanted behavior to not show the error messages while the user is first inputting.
- The **Is Valid** output is used to determin if the form is valid and thus if the submit action should be performed. In this case the **Save User** action is not performed unless the _Only save if valid_ condition is true.
- The **Name** and **Email** outputs from the **Validate** node are the ones that are sent to the action. The validation node can also perform modifiers on the property, such as trimming etc and the modified propertys are provided as outputs of the **Validate** node.
The **Validate** node is based on the open source library [Yup](https://github.com/jquense/yup) and in the documentation you can find many more examples. Here are a few others that can be useful:
```javascript
schema({
Password: string()
.required('Must provide password')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
'Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character'
),
ConfirmPassword: string()
.required('Must confirm password')
.oneOf([ref('Password')], 'Passwords must match'),
})
```
This can be used to validate that a password is formatted correctly and you can also use this module to make sure that two input fields match.
```javascript
schema({
'Due Date': date().min(new Date(), 'Must be a date in the future'),
})
```
If you want to use spaces in your property names, make sure they are provided as strings i.e. in quatation marks. This example above tests a date and make sure that it is a date in the future.
## Validating objects
You don't need to connect each individual property if you instead have an object that you want to validate you can simply pass the **Id** of the object ot validate.
<div className="ndl-image-with-background xl">
![](/library/modules/validation/object-validation.png)
</div>
You can use the individual error outputs as shown above, but there is also a collection of all errors in the **Errors** output. This is an array with the following format:
```javascript
[
{
Property:"The property that has an error",
Error:"The error message"
}
]
```

View File

@@ -0,0 +1,69 @@
---
title: Validate
hide_title: true
---
<##head##>
# Validate
The **Validate** node is used to validate data provided as inputs to the node based on a specified _schema_. This is most commonly used to validate input forms, learn more in the [guide](/library/modules/validation).
![](/library/modules/validation/simple-validate.png ':class=img-size-l')
<##head##>
## Inputs
### General
**Schema**
Here you can specify a _schema_ script that declares the inputs to the node and how they should be validated. The script has the following format:
```javascript
schema({
Name: string().required('Must provide name'),
Email: string()
.required('Must provide email')
.email('Must be a valid email'),
})
```
Learn more about the schema script in the validation [guide](/library/modules/validation).
**Enabled**
This property controls if the validation should run or not. If set to **false** the validation will not run and no errors will be outputted. Default is **true**.
### Properties
For each property declared in the _schema_ script the node will have one input with the same name. These are used to supply the data that should be validated.
You can also provide an object to be valided via the **Object Id** input. See the [guide](/library/modules/validation) for more details.
### Property Enabled
For each property there will be one boolean that specifies if that particular property should be validated. Default is **true**, if set to **false** that property will not generate any errors during validation.
### Actions
This category consist of two signal inputs for each property, one to enable the validation for the corresponding property and one to disable it. All property validations are enabled by default, if disabled that particular property will not generate any errors.
## Outputs
### General
**Is Valid**
If the node is enabled, and all properties in the _schema_ are valid this output will have **true** otherwise **false**.
### Properties
Each property in the _schema_ will have an output as well. The schema can contain transforms on the properties, such as trimming etc. The transformed properties will be available on these outputs.
### Errors
Each property will possibly have an error if it fails validation according to the _schema_. In that case the error message will be outputted here. If there are not errors or if the validation for that property is disabled an empty string will be outputted.
There is also an array with a collection of all errors on the **Errors** output. See the [guide](/library/modules/validation) for more details.
### Has Error
Each property will also have a corresponding **Has Error** output that is a boolean, so it will have **true** if the property validation is enabled and the property fails validation, otherwise **false**.