I'm making a React app which has some util functions related to validation of forms. A custom hook called useForm calls the validation util functions to validate its data but this error gets thrown when I call the util function. Error:
Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null
handleBlur useForm.js:18
onBlur SignUp.js:90
React 23
js index.js:6
factory react refresh:6
Webpack 3
2 useForm.js:18
Here's my hook:
import { useState } from "react";
import { validateField, validateForm } from "../util/validationUtils";
export const useForm = initialState => {
const [formState, setFormState] = useState(initialState);
const [formErrors, setFormErrors] = useState({});
const handleChange = e => {
setFormState(formState => ({
...formState,
[e.target.name]: e.target.value,
}));
};
const handleBlur = (e, ...args) => {
console.log(e.target.value, ...args);
const [error, secondaryError, field] = validateField(e, ...args);
setFormErrors(formErrors => ({
...formErrors,
[e.target.name]: error || "",
}));
if (field) {
setFormState(formState => ({
...formState,
[field]: secondaryError || "",
}));
}
};
return [
formState,
formErrors,
handleChange,
handleBlur,
];
};
And here's my validation function:
export const validateField = (e, ...args) => {
const { name, value } = e.target;
let error = null;
let secondaryError = null;
let field = null;
if (value.length === 0) return error;
switch (name) {
case "username":
error = validateUsername(value)
? null
: "Username must not contain spaces";
break;
case "email":
error = validateEmail(value) ? null : "Invalid email";
break;
case "password":
error = validatePassword(value)
? null
: "Password must be at least 8 characters, have an uppercase and lowercase letter and one special character";
if (validateMatchingPasswords(value, ...args[0])) {
field = "confirmPassword";
secondaryError = "Passwords do not match";
}
break;
case "confirmPassword":
error = validateMatchingPasswords(...args[0], value)
? null
: "Passwords do not match";
break;
case "imageUrl":
error = validateUrl(value) ? null : "Invalid URL";
break;
default:
break;
}
return [error, secondaryError, field];
};
In the form component I call the function handleBlur, exported from the hook. When I need ...args like confirmPassword field's value I pass it on. I think the problem happens when I give the field an empty value (e.target.value is "")
Top comments (0)