react-hook-form Controller onBlur callback not triggering validation

Question

Want to trim an input field when user onBlurs.

    <Controller 
    ...
    onBlur={([e]) => {
    const { value } = e.target;
    const trimmedValue = value.trim();
    console.log('trim here: ', value, value.length, trimmedValue.length);
    if (trimmedValue === '') {
    console.log('error!!!');
    return trimmedValue;
    }
    return trimmedValue;
    }} />

Rule:

rules={{
 pattern: {
 value: new RegExp(firstName.validationString, 'i'),
message: 'First name must be 2 - 100 characters with no numbers.',
},
required: firstName.mandatory && 'Must fill in first name',
}}

The function is triggered and reaching the if-statement. But is not triggering an error even though I have a rule set as required.

Answer 1

use this in your register or controller

validate: (value) => { return !!value.trim()}

Take a look here: https://github.com/react-hook-form/react-hook-form/issues/1650