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'
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!