Validation for Form and Store

Form and Store Validation is used to validate the form and store variables.

Validation Schema

A validation schema defines the validation rules using the yup schema. Yup is a JavaScript schema builder for value parsing and validation.

## Example

```yaml
validationSchema:
  firstName:
    required:
      message: First Name is required
    min:
      length: 2
      message: First Name should be more than 2 characters
  address:
    type: object
    schema:
      street:
        required:
          message: Street is required
      city:
        required:
          message: City is required
      zip:
        required:
          message: Zip is required
        min:
          length: 5
          message: Zip should be 5 characters
  phoneNumbers:
    type: array
    min:
      length: 1
      message: At least one phone number is required
    itemSchema:
      type: string
      required:
        message: Phone number is required

Explanation:

• firstName: Must be at least 2 characters long and is required.
• address: An object containing street, city, and zip, each with their own validation rules.
• phoneNumbers: An array that must contain at least one phone number. Each phone number must be a string and is required.

Invoking Validation

Validation can be invoked using the validateForm and validateStore actions.

Validate Form

The validateForm action is used to validate the form.

Arguments:

• validationSchema: The validation schema to use. If omitted, the form's own validationSchema will be used.

component: form
name: myForm
props:
  initialValue:
    firstName: John
    lastName: Doe
  validationSchema:
    firstName:
      required:
        message: First Name is required
      min:
        length: 2
        message: First Name should be more than 2 characters
    phoneNumbers:
      type: array
      min:
        length: 1
        message: At least one phone number is required
      itemSchema:
        type: string
        required:
          message: Phone number is required
  children:
    - component: field
      name: firstName
      props:
        label: First Name
        type: text
        placeholder: Enter your first name
    - component: field
      name: lastName
      props:
        label: Last Name
        type: text
    - component: button
      props:
        label: Submit
        onClick:
          validateForm:
            onSuccess:
              - navigate: /success
            onError:
              - showErrors: "{{ result.errors }}"

Validate Store

The validateStore action is used to validate the store.

Arguments:

• validationSchema: The validation schema to validate the store. Required.

component: button
props:
  label: "Submit"
  onClick:
    validateStore:
      validationSchema:
        firstName:
          required:
            message: First Name is required
          min:
            length: 2
            message: First Name should be more than 2 characters
          dateOfBirth:
            type: date
            min: "{{ eval new Date('2000-01-01') }}"
            required:
              message: Date of Birth is required
        phoneNumbers:
          type: array
          min:
            length: 1
            message: At least one phone number is required
          itemSchema:
            type: string
            required:
              message: Phone number is required
      onSuccess:
        - setStore:
            errors: {}
        - navigate: /success
      onError:
        - setStore:
            errors: "{{ result.errors }}"