Hi all, when I have multiple validations, for example minLength on an optional field, how do I achieve this with the in-built validation function? I need minLength to validate only if the field isn't empty.

Bill@bluebill1049

Team

2:22am

hey

@dhanushka

2:23am

https://react-hook-form.com/api#register

2:23am

check out the validate function

2:23am

at the bottom of the talbe

2:23am

you can have multiple validation rules attached to your input

Dhanushka Krishnajith@dhanushka

2:55am

Thank you Bill

Bill@bluebill1049

Team

2:56am

my pleasure :)

October 31, 2019 at 9:36pm

Dhanushka Krishnajith@dhanushka

9:36pm

It seems like we can only have one type of validation in rule per field. For example, I can only use one pattern rule. What if I have two patterns to validate (this is important when I need to switch rules applied conditionally). Is there a way to provide an array of validation rules?

Edited

Jerome@jeromedeleon

Team

1:01am

Is passing an object in validate does not work for you?

<input
  name="test"
  ref={
    register({
      validate: {
        smallCasePattern: value => /[a-z]+/.test(value),
        digitPattern: value => /[0-9]{2}/.test(value)
      }
    })
  }
/>

Edited

Bill@bluebill1049

Team

2:01am

thanks

@jeromedeleon

i think you miss the valdiate

November 7, 2019 at 4:53am

Dhanushka Krishnajith@dhanushka

4:53am

Thanks

@jeromedeleon

. The document is not clear about, validate can be an object. I thought it could only be a function.

aaaaahua@aaaaahua

5:41am

How do I change the style/className of input when an error is displayed?

5:42am

The method I'm using right now is not very good is there a right way?

Jerome@jeromedeleon

Team

10:39am

@dhanushka

nope, it is included in the document in the register part of API section.

November 7, 2019 at 10:00pm

Dhanushka Krishnajith@dhanushka

10:00pm

aaaaahua@aaaaahua

Have you considered using https://www.npmjs.com/package/classnames

aaaaahua@aaaaahua

3:27am

Dhanushka Krishnajith@dhanushka

Have you considered using https://www.npmjs.com/package/classnames

thanks, I'll look it

November 29, 2019 at 10:36am

Quique Fdez Guerra@ckgrafico

10:36am

Hey I've problems with ref + bootstrap + typescript I've created a bug https://github.com/react-hook-form/react-hook-form/issues/598

December 4, 2019 at 5:39pm

Milos@milosdavidovic

5:39pm

Hi all, I am considering this library for use in the project were we have several custom components which don't expose refs so idea is to use setValue function when value changes like ReactSelect is used in the example:

From the example: We track components state manually:

const [values, setReactSelect] = useState({
    selectedOption: []
  });

Then change handler is defined and it needs to call two state update functions:

 const handleMultiChange = selectedOption => {
    setValue("reactSelect", selectedOption);
    setReactSelect({ selectedOption });
  };

And finally we use component like:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={values.selectedOption}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

This seems like a lot of extra work, especially if you have 10 such components on the form.

My question is can we use something like this:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={watch("reactSelect")}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

or this:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={getValues().reactSelect}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

or is there some other solution?

Thanks, Milos

December 5, 2019 at 1:03am

Jerome@jeromedeleon

Team

1:03am

Have you tried using the wrapper component?

1:04am

Try searching for react-hook-form-input

December 5, 2019 at 9:10am

Milos@milosdavidovic

9:10am

@jeromedeleon

, thanks for the reply. I've seen that, I can give it a try although it is an extra dependency. But what do you think about solutions proposed above (watch and getValues)?

December 6, 2019 at 2:00am

leekuo@leekuo

2:00am

Hey guys, do you know how I could make a field required or not depending on the button that is pressed?

Show more messages

This conversation has been locked