gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated signup validation

Browse source 
added user validation messages to the signup page
This commit is contained in:
danielq65 2023-04-28 13:45:22 -04:00
parent 4b817c39b1
commit 7f9815191b
2 changed files with 39 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/pages/Signup.jsx
View file

@ -47,10 +47,27 @@ export default function SignUp() {
});
}
(() => {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated')
}, false)
})
})()
return (
<div className="auth-wrapper">
<div className="auth-inner">
<form id="form" onSubmit={handleSubmit}>
<form className="needs-validation" id="form" onSubmit={handleSubmit} noValidate>
<h3>Sign Up</h3>
<div className="mb-3">
<label>First name</label>
@ -58,10 +75,14 @@ export default function SignUp() {
type="text"
className="form-control"
placeholder='First Name'
pattern="\S(.*\S)?"
value={firstName}
onChange={(event) => setFirstName(event.target.value)}
required
/>
<div className='invalid-feedback'>
Please enter a valid first name
</div>
</div>
<div className="mb-3">
<label>Last name</label>
@ -69,10 +90,14 @@ export default function SignUp() {
type="text"
className="form-control"
placeholder="Last name"
pattern="\S(.*\S)?"
value={lastName}
onChange={(event) => setLastName(event.target.value)}
required
/>
<div className='invalid-feedback'>
Please enter a valid last name
</div>
</div>
<div className="mb-3">
<label>Email address</label>
@ -84,6 +109,9 @@ export default function SignUp() {
onChange={(event) => setEmail(event.target.value)}
required
/>
<div className='invalid-feedback'>
Please enter a valid email address
</div>
</div>
<div className="mb-3">
<label>Password</label>
@ -91,10 +119,19 @@ export default function SignUp() {
type="password"
className="form-control"
placeholder="Enter password"
pattern="\S(.*\S)?"
minLength="8"
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
<div className='invalid-feedback'>
Please enter a valid password
<br/>
Your new password must be at least 8 characters long
<br/>
It cannot have whitespace at the start or end of it
</div>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary mb-3">

2
src/pages/Welcome.jsx
View file

@ -50,7 +50,7 @@ export default function Welcome() {
</div>
</Col>
</Row>
<Button className="mx-auto" variant="outline-success" href="/signup">Create an account for free</Button>
<Button className="mx-auto mb-5" variant="outline-success" href="/signup">Create an account for free</Button>
</Container>
</div>
);