Module: "useConstraints"

May 22, 2020 · View on GitHub

▸ useConstraints<T>(rules: T): ConstantValues‹T, Validator›

A declarative way of validating inputs based upon HTML 5 constraints.

example Basic

 const validator = useConstraints({
     firstName: { required: true, minLength: 5, maxLength: 6 },
     lastName: { required: true, maxLength: 100 },
     age: { type: "number", min: 18, max: 99 },
     location: { required: true, pattern: /(europe|africa)/},
     email: { required: true, type: "email" },
     website: { required: true, type: "url" }
 });
 // note that empty string means the value is valid.
 validator.firstName("Johny") === "";

example Displaying custom messages on error.

 const validator = useConstraints({
     // use min, max on date type
     startDate: { type: "date", min: Date.now() },
     // custom message
     name: {
         required: "name is required",
         maxLength: [55, "name must be under 55 characters"]
     },
 })

example Usage with useForm

 useForm({
   constraints: {
     location: { required: true, pattern: /(europe|africa)/},
     email: { required: true, type: "email" },
   },
 })

Type parameters:

▪ T: ConstraintValidators

Parameters:

Name	Type	Description
`rules`	T	an object map that consist of Constraints or Validator as values.

Returns: ConstantValues‹T, Validator›

maps the rules to an object map where the value is a function. Each function accepts only one argument that is the value to validate when invoked.

▸ useConstraints(syncedConstraint: SyncedConstraint): SingleValidator‹FieldValue›

A declarative way of creating validation logic that is dependent on other values.

example Binding constraints to values.

 const validator = useConstraints((values) => ({
     startDate: { type: "date", min: Date.now() },
     // ensure that the end date is always greater than the start date
     endDate: {
         type: "date",
         min: [values.startDate, "end date must be greater than start date"]
     },
 }))
 // note: if you are using the constraints with the useForm hook
 // then you can bind the validator with the values so that the handler
 // can be used with events
 const handleBlur = useValidationWithValues(validator, values);

example Usage with useForm

 useForm({
   constraints(values) {
     startDate: { type: "date", min: Date.now() },
     // ensure that the end date is always greater than the start date
     endDate: {
         type: "date",
         min: [values.startDate, "end date must be greater than start date"]
     },
   }
 });

Parameters:

Name	Type	Description
`syncedConstraint`	SyncedConstraint	A validator function that accepts a value map as the only argument. The return value of the specified function must be of type ConstraintValidators.

Returns: SingleValidator‹FieldValue›

A validation function similar to the validate function from useValidation.

▸ useConstraints<T>(rules: SyncedConstraint | T): ConstantValues‹T, Validator› | SingleValidator‹FieldValue›

A declarative way of validating inputs based upon HTML 5 constraints.

Type parameters:

▪ T: ConstraintValidators

Parameters:

Name	Type
`rules`	SyncedConstraint \| T

Returns: ConstantValues‹T, Validator› | SingleValidator‹FieldValue›

If you are using this outside of useForm, then it is recommended that you use this with useValidation.

Module: "useConstraints"

Module: "useConstraints"

Index

Functions

Functions

useConstraints