$8\mathrm{.}17$ LAB: User registration form $($JavaScript$)$

lab activity

$8\mathrm{.}17\mathrm{.}1$: LAB: User registration form $($JavaScript$)$

$1/10$

Overview

In this lab, you will use regular expressions with JavaScript to validate a user registration form. Error messages will be displayed at the bottom of the form, as shown below.

Step $1$: Inspect the project

The project contains HTML$,$ CSS$,$ and JavaScript files. The register.js file registers a click event handler for the Register button that prevents the form from submitting. The event handler calls checkForm$()$ to perform data validation.

Step $2$: Implement checkForm$()$

Complete checkForm$()$ in register.js to verify that the user$-$provided information is valid.

If form validation errors exist:

Display the formErrors

function checkForm$()\{$

const formErrors $=$ document.getElementById$(\text{'}$formErrors$\text{'})$;

const fullName $=$ document.getElementById$(\text{'}$fullname$\text{'})$;

const email $=$ document.getElementById$(\text{'}$email$\text{'})$;

const password $=$ document.getElementById$(\text{'}$password$\text{'})$;

const confirmPassword $=$ document.getElementById$(\text{'}$confirm$-$password'$)$;

let errors $=[]$;

$//$ Clear previous error states

formErrors.innerHTML $=""$;

$[$fullName$,$ email, password, confirmPassword$].$forEach$($input $=>\{$

if $($input$)$ input.classList.remove$(\text{'}$error$\text{'})$;

$\})$;

$//$ Check if form is empty

const isFormEmpty $=!$fullName?.value && $!$email?.value && $!$password?.value && $!$confirmPassword?.value;

if $($isFormEmpty$)\{$

errors.push$("$Missing full name."$)$;

errors.push$("$Invalid or missing email address."$)$;

errors.push$("$Password must be between $10$ and $20$ characters."$)$;

errors.push$("$Password must contain at least one lowercase character."$)$;

errors.push$("$Password must contain at least one uppercase character."$)$;

errors.push$("$Password must contain at least one digit."$)$;

$[$fullName$,$ email, password, confirmPassword$].$forEach$($input $=>\{$

if $($input$)$ input.classList.add$(\text{'}$error$\text{'})$;

$\})$;

$\}$ else $\{$

$//$ Individual field validation

if $(!$fullName?.value $||$ fullName.value.trim$().$length $===0)\{$

errors $=["$Missing full name."$]$;

fullName?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $(!$email?.value $||!/^[$a$-$zA$-$Z$0-9.\_-]+$@$[$a$-$zA$-$Z$0-9.-]+\backslash .[$a$-$zA$-$Z$]\{2,5\}$$$/.$test$($email$.$value$))\{$

errors $=["$Invalid or missing email address."$]$;

email?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $(!$password?.value $||$ password.value.length $<10||$ password.value.length $>20)\{$

errors $=["$Password must be between $10$ and $20$ characters."$]$;

password?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $(!/[$a$-$z$]/.$test$($password$.$value$))\{$

errors $=["$Password must contain at least one lowercase character."$]$;

password?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $(!/[$A$-$Z$]/.$test$($password$.$value$))\{$

errors $=["$Password must contain at least one uppercase character."$]$;

password?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $(!/[0-9]/.$test$($password$.$value$))\{$

errors $=["$Password must contain at least one digit."$]$;

password?.classList.add$(\text{'}$error$\text{'})$;

$\}$ else if $($password$.$value $!==$ confirmPassword?.value$)\{$

errors $=["$Password and confirmation password don't match."$]$;

confirmPassword?.classList.add$(\text{'}$error$\text{'})$;

$\}$

$\}$

$//$ Display errors

if $($errors$.$length $>0)\{$

const ul $=$ document.createElement$(\text{'}$ul$\text{'})$;

errors.forEach$($error $=>\{$

const li $=$ document.createElement$(\text{'}$li$\text{'})$;

li$.$textContent $=$ error;

ul$.$appendChild$($li$)$;

$\})$;

formErrors.appendChild$($ul$)$;

formErrors.classList.remove$(\text{'}$hide$\text{'})$;

$\}$ else $\{$

formErrors.classList.add$(\text{'}$hide$\text{'})$;

$\}$

$\}$

document.getElementById$("$submit$").$addEventListener$("$click$",$ function$($event$)\{$

checkForm$()$;

event.preventDefault$()$;

$\})$;