slawk0/relay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added form validation

Browse Source
This commit is contained in:
slawk0
2024-09-26 18:33:35 +02:00
parent 24ab80244f
commit 4e1bf18f45
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/pages/Signup.tsx
View File

@@ -60,7 +60,7 @@ export default function Signup() {
type="username"
required
autoComplete="username"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
{errors?.username?.type === "maxLength" && (
<p>First name cannot exceed 20 characters</p>
@@ -95,8 +95,19 @@ export default function Signup() {
name="password"
type="password"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
{errors?.password?.type === "maxLength" && (
<p>First name cannot exceed 20 characters</p>
)}
{errors?.password?.type === "minLength" && (
<p>Username must be between 4 and 20 characters</p>
)}
{errors?.password?.type === "pattern" && (
<p>
Username can only contain letters, numbers and underscores
</p>
)}
</div>
</div>
<div>
@@ -115,8 +126,19 @@ export default function Signup() {
name="sPassword"
type="password"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
{errors?.sPassword?.type === "maxLength" && (
<p>First name cannot exceed 20 characters</p>
)}
{errors?.sPassword?.type === "minLength" && (
<p>Username must be between 4 and 20 characters</p>
)}
{errors?.sPassword?.type === "pattern" && (
<p>
Username can only contain letters, numbers and underscores
</p>
)}
</div>
</div>
<div>