I'm new to React. js., so I was trying to use the form below, but when I press the Sign up button, that is supposed to submit the form and show <SignUpFormSuccess />. There are no errors shown. Each field is filled out properly. Does anyone have any idea why the button does not submit (doesn't work)? And If I want to show the other page in case if no errors are shown, how do I do it? Would appreciate any help!
Sandbox
Solution provided by @antoineso works but not the way it is supposed to. The problem here is that I have 2 sign up variants. First is for a user, second for a business, as you can see variables in each are different, so when I fill out user's sign up, there is 1 field for companyName left empty. His solution work only because he added a default value to companyName, otherwise its still empty and the form cannot be submitted.
My validateInfo.js file
export default function validateInfo(values) {
let errors = {};
//email
if (!values.email) {
errors.email = 'Email required';
} else if (!/S+@S+.S+/.test(values.email)) {
errors.email = 'Email address is invalid';
}
if (!values.companyName.trim()) {
errors.companyName = "Company Name required"
}else if (!/^[A-Za-z]+/.test(values.companyName.trim())) {
errors.companyName = 'Enter a valid company name';
}
//username
if (!values.username.trim()) {
errors.username = "Username required"
}else if (!/^[A-Za-z]+/.test(values.username.trim())) {
errors.username = 'Enter a valid username';
}
//fullname
if (!values.fullname.trim()) {
errors.fullname = 'Full Name required';
}
else if (!/^[A-Za-z]+/.test(values.fullname.trim())) {
errors.fullname = 'Enter a valid Full Name';
}
//password
if (!values.password) {
errors.password = 'Password is required';
} else if (values.password.length < 6) {
errors.password = 'Password needs to be 6 characters or more';
}
return errors;
}
My useForm.js file looks this way:
import { useState, useEffect } from 'react';
const useForm = (callback, validate) => {
const [values, setValues] = useState({
username: '',
email: '',
fullname:'',
password: '',
businessEmail: '',
companyName:''
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = e => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
const handleSubmit = e => {
e.preventDefault();
setErrors(validate(values));
setIsSubmitting(true);
};
useEffect(
() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
},
[callback, errors, isSubmitting]
);
return { handleChange, handleSubmit, values, errors };
};
export default useForm;
SignUpUser.js looks this way:
import React from 'react';
import useForm from '../useForm';
import validate from '../validateInfo';
import './SignUpForm.css'
const SignUpUser = ({submitForm}) => {
const { handleChange, values, handleSubmit, errors } = useForm(submitForm,validate);
return (
<div className="form-content-right">
<form className="form" onSubmit={handleSubmit}>
<h1>Join our community by setting up your account</h1>
<div className="form-inputs">
<label className='form-label'>
</label>
<input
type="email"
name="email"
className='form-input'
placeholder="Email"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p>{errors.email}</p>}
</div>
<div className="form-inputs">
<label htmlFor="fullname" className='form-label'> </label>
<input
type="text"
name="fullname"
className='form-input'
placeholder="Full Name"
value={values.fullname}
onChange={handleChange}
/>
{errors.fullname && <p>{errors.fullname}</p>}
</div>
<div className="form-inputs">
<label htmlFor="username" className='form-label'></label>
<input
type="text"
name="username"
className='form-input'
placeholder="Username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
<label htmlFor="password" className='form-label'> </label>
<input
type="text"
name="password"
className='form-input'
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<button className="form-input-btn" type='submit'>Sign Up</button>
<span className="form-input-login"> Already have an account? <a href="/log-in">Login</a> </span>
</form>
</div>
);
};
export default SignUpUser;
My SignUpFormUser.js file
import React, { useState } from 'react';
import SignUpUser from './SignUpUser';
import SignUpFormSuccess from './SignUpFormSuccess';
import { Link } from 'react-router-dom';
const SignUpForm = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
function submitForm() {
setIsSubmitted(true);
}
return (
<>
<div className="grid-container top">
<div className="grid-item back">
<Link to='/sign-up'>
<img src="/images/backOutline.svg" alt="" />
</Link>
</div>
<div className="grid-item logo">
<Link to='/' className='logo'>
<img src="/images/yokifyLogoBlk.svg" alt="" />
</Link>
</div>
<div className="grid-item cancel">
<Link to='/'>
<img src="/images/cancelOutline.svg" alt="" />
</Link>
</div>
</div>
<div className='form-container'>
<div className="form-content-left">
<img src="/images/handsUp.svg" alt="people" className="form-img"/>
</div>
{!isSubmitted ? (
<SignUpUser submitForm={submitForm} />
) : (
<SignUpFormSuccess />
)}
</div>
</>
);
};
export default SignUpForm;
SignUpBusiness
import React from 'react';
import useForm from '../useForm';
import validate from '../validateInfo';
import './SignUpForm.css'
const SignUpBusiness = (submitForm) => {
const { handleChange, values, handleSubmit, errors } = useForm(submitForm, validate);
return (
<div className="form-content-right">
<form className="form" onSubmit={handleSubmit}>
<h1>Set up your company's profile</h1>
<div className="form-inputs">
<label className='form-label'> </label>
<input
type="text"
name="companyName"
className='form-input'
placeholder="Company's Name"
value={values.companyName}
onChange={handleChange}
/>
{errors.companyName && <p>{errors.companyName}</p>}
</div>
<div className="form-inputs">
<input
type="text"
name="fullname"
className='form-input'
placeholder="Admin's Full Name"
value={values.fullname}
onChange={handleChange}
/>
{errors.fullname && <p>{errors.fullname}</p>}
</div>
<div className="form-inputs">
<input
type="text"
name="username"
className='form-input'
placeholder="Username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
{/* <label htmlFor="password" className='form-label'> </label> */}
<input
type="text"
name="password"
className='form-input'
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<button className="form-input-btn&
