Validation

The package uses nocms-validation, meaning that you can pass on the validation rules using the validate prop on <Field />.

<Field required name="name" validate="notEmpry" />
<Field required name="email" validate="email" />

Fields are validated on the blur event of the input, providing instant user feedback. Additionally, all fields revalidated on submit. The onSubmit function on <Form /> is only invoked if all fields are valid. Otherwise, error messages are displayed, and focus is put on the first invalid field.

Error messages

Custom error texts can be passed to <Field /> using the errorText prop. Additionally, CSS classes for the errorText element and the errorText wrapper element can be passed, using the props errorTextClass and errorWrapperClass.

<Field
  required
  name="norwegianZipCode"
  validate="\d{4}"
  errorText="Norwegian zip codes need to be four digits"
  errorTextClass="color-me-red"
  errorTextClass="make-me-stand-out"
/>