validators array support

[blasdfaa]

To use multiple checks, you must use a verbose if condition:

 validate: {
      email: (value) => {
        if (!value.trim().length) return 'Email cannot be empty';
        if (!RegExp(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/).test(value)) return 'Invalid email';
        return null;
      }
    },

This syntax may be more convenient:

 validate: {
      email: [
        isNotEmpty('Email cannot be empty'),
        isEmail('Invalid email'),
      ],

[alexnguyennz]

Yes this would be great (unless there's another way to use multiple is helper functions together).

[rtivital]

There is no reason to combine validators, use-form supports schema based validation which is much more advanced and readable – https://mantine.dev/form/validation/#zod

[blasdfaa]

Validators like this have a bunch of dead code when only a small part of this library is used for form validation.

[blasdfaa]

Check fields and show errors for 19kb? No, thanks.
I found @mantine/form very user friendly and minimalistic compared to the competition. Would like to improve DX

[alexnguyennz]

Yep I did just try that zod example, added about 14KB for me on clientside. Not a big deal actually, I can just do manual validators.

[davigmacode]

Actually there is a simple implementation,
just create a validator that combine another validator,
I publish a package named mantine-form-rules

Quick Usage

import { PasswordInput, Box, Button } from '@mantine/core';
import { useForm } from '@mantine/form';
import rules from 'mantine-form-rules';

export default function Page() {
  const form = useForm({
    validateInputOnChange: true,
    validateInputOnBlur: true,
    initialValues: {
      currentPassword: '',
      newPassword: '',
      newPasswordConfirm: '',
    },
    validate: {
      currentPassword: rules.isRequired(),
      newPassword: rules([
        rules.isRequired(),
        rules.hasUpperCase(),
        rules.hasNumber(),
        rules.minLength(6),
      ], { accumulate: true }), // return every or first occured error
      newPasswordConfirm: rules([
        rules.isRequired(),
        rules.matchesField('newPassword', 'Passwords are not the same'),
      ]),
    },
  });

  return (
    <Box w={300} mx="auto" mt="xl">
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <PasswordInput
          label="Current Password"
          placeholder="Your password"
          {...form.getInputProps('currentPassword')}
        />
        <PasswordInput
          label="New Password"
          placeholder="Your password"
          mt="sm"
          {...form.getInputProps('newPassword')}
        />
        <PasswordInput
          label="Confirm New Password"
          placeholder="Your password"
          mt="sm"
          {...form.getInputProps('newPasswordConfirm')}
        />
        <Button type="submit" mt="lg">Submit</Button>
      </form>
    </Box>
  );
}

Tree shaking

import { 
  some, // combine rule and return the first occurred error
  every, // combine rule and return every occurred error
  isRequired, hasUpperCase, hasNumber, minLength 
} from 'mantine-form-rules';

const form = useForm({
    initialValues: {
      password: '',
    },
    validate: {
      password: some([
        isRequired(),
        hasUpperCase(),
        hasNumber(),
        minLength(6),
      ]),
    },
  });

[Crocsx]

Was actually trying to find this today. You provide in the library already 90% of common usage validator, I think it would be so much convenient to be ab le to just chain them so we could use only mantine validator rather then adding external library (or implementing homemade function) just because I can't show different message for "password is empty" and "password do not match regex"

For now I suggest doing something like

const combineValidators =
  (...validators) =>
  (value) => {
    const errors = validators
      .map((validator) => validator(value))
      .filter((result) => result !== null);

    return errors.length > 0 ? errors[0] : null;
  };

[mkf62]

+1, I'd really like to see this type of support in forms.