Валидация input (возвращает в строку false). Как исправить?

Question

[DimaSBB]

На инпуте висит событие onChange по которому выполняется фунция handleChangeField когда мы что-то пишем в инпут.
Функция handleChangeField:

const handleChangeField = (event) => {
        let value = event.target.value;
        
        setTitle(InputValidator(value, maxSize));
    }

внутри этой функции я вызываю валидатор (проверка на максимальное кол-во введенных элементов и на спец символы) который я вынес в отдельную функцию InputValidator:

const InputValidator = (value, maxSize) => {
    let regExp = /[^а-яА-Яa-zA-Z0-9\s]/.test(value);
    
    if (regExp) return false;
    if (value.length > maxSize) return false;
    
    return value;
}

export default InputValidator;

Проблема в том что когда введенное количество символов превысило допустимое или введенный символ не прошел проверку на регулярку то в инпут вписывается строчное значение "false". Как это пофиксить?

Answer 1

[0xD34F]

Пусть валидатор возвращает true/false вместо корректное_значение/false:

const validator = (value, maxSize) =>
  !(/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize);

Соответственно, setTitle вызывайте только в случае true:

if (validator(value, maxSize)) {
  setTitle(value);
}

Если же вам всё-таки необходимо, чтобы валидатор возвращал значение инпута, то он должен получать не только то, которое проверяет, но и какое-то дефолтное корректное, чтобы было что вернуть в случае отрицательного результата проверки:

const validator = (defaultValue, value, maxSize) =>
  (/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize)
    ? defaultValue
    : value;

setTitle(prevValue => validator(prevValue, value, maxSize));