Estoy usando joi para la validación de front-end en React. No uso joi-browser ya que me dijeron que estaba obsoleto. Aquí hay una parte del esquema joi:

 schema = Joi.object({ namePrefix: Joi.string() .trim() .alphanum() .regex(/[ab]/i) .min(0) .max(100) .messages({ "string.pattern.base": "Name parts should be letters only", }), givenName: Joi.string() .trim() .alphanum() .regex(/[ab]/i) .min(1) .max(100) .messages({ "string.pattern.base": "Name parts should be letters only", }) .required()});

Aquí hay una función de actualización de accesorios que también realiza la validación:

 handleUpdateProp = (e, propName) => { const rule = this.schema.extract(propName); const subSchema = Joi.object({ [propName]: rule }); const propValue = e.target.value; const objToValidate = { [propName]: propValue }; const { error } = subSchema.validate(objToValidate); const validationResult = error ? error : null; const validationError = validationResult ? validationResult.details[0].message : null; const stateErrors = this.state.errors; stateErrors[propName] = validationError; this.setState({ [propName]: propValue, errors: stateErrors, }); };

namePrefix y GivenName corresponden a campos de formulario y un div se representa condicionalmente debajo de ellos si hay un error para ese campo. Si escribo un carácter en namePrefix, no hay error: Hasta ahora, todo bien. Cuando elimino el carácter, joi devuelve el error '"namePrefix" solo debe contener caracteres alfanuméricos'

Ejemplo:

Obviamente, no se debe devolver ningún error porque se permite que la cadena esté vacía. ¿Por qué está pasando esto? ¡Por favor ayuda!