Validate Inputs

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Some form elements have options to validate the inputs when blurred but other, like a checkbox, don't have a that. After a user submits a form, but before the request is made to your endpoint, you'll want to validate the inputs again to catch any errors.

Any elements that have been removed from a Form using the hidden_if property will not be included in the validation.

Front end validation is done for user experience, you should incorporate server side validation for the actual check, and never trust the data coming from a client.

Error states will automatically be shown for any component that fails validation.



Props


inputs array<Input>
The array of inputs you want to validate. These inputs should be declared in your script tag and passed into the Form element as a prop. The validation will look at the validation property of each input.


Returns


Promise<Object>
The value of this promise does not matter. If it's successful it doesn't return anything and if it fails it will automatically trigger error states on the appropriate components.

<script>
  import { validateInputs } from "bubbles-ui";

  const formInputs = [
    {
      type: "text",
      id: "name", //the id that will be shown if there is an error
      label: "Your Name",
      value: null,
      desc: "You'll be able to change this name later",
      error: "A name is required",
      validation: "string|required|min:3", //the validation requirements that will be run
      validate_on_blur: true,
      vob: true,
    },
    {
      type: "submit",
      label: "Submit Form",
      onsubmit: async (event) => {
        try {
          //if there are any errors, calling validateInputs will automatically show error states for
          //all components that have failed validation

          await validateInputs(toastExampleFormInputs); //if any inputs fail validation, the promise will be rejected
        } catch (error) {
          showToast(error.message);
        }
      },
    },
  ];
</script>

Validation Params

Every form input has a property called validation. This accept a string of values that indicate how you want this input to be validated.

You can pass multiple options by separating with a pipe character. In addition, some validations options take an extra parameter, which is done with a colon.

For example: a common use case is for password character to have a minimum length. So you want the field to be required, a string, and have a minimum length of 8. This will be expressed as: required|string|min:8. The order does not matter.

Param Details
required The input has to have a value
boolean Accepts true, false, 0, 1 and their string counterparts e.g: "true"
accepted The value must be either: "on", "yes", 1, "1", true, "true", or "checked"
string The value must be a string
min: (min:7) Compares the size of strings or the value of numbers if there is a truthy value
max: (max:5) Compares the size of strings or the value of numbers if there is a truthy value
email The value must be an email
array The value must be an array
url The value must be a url
alpha The string value must only have letters, uppercase and lowercase
alpha_dash The string value must only have letters, numbers, dashes, and underscores
alpha_num The string must only have numbers and letters
integer The value must be an integer. Can be a string like "10"
regex: Add a custom regex string for validation
date The value has to be a date value