Form Validation with Javascript

YvonneDev
3 min readOct 14, 2020

Features:

form validation with html validation format

phone number and email address with Reg expression

passwords should be match with Javascript function to go through register processing

show up the message below according to the filling content

CODE Github

DEMO

HTML

all the inputs are required. If empty, register won’t pass.

the pattern of the phone is a reg expression with a 10 number format.

the password pattern is from RegExr

the message display box changing with Javascript. default is “here”

CSS

center the form container

input has two kinds of pseudo conditions.And will be used when using form.checkValidity()

the event will return false if not valid.

button hovering styles and message center.

JAVASCRIPT

select DOM

When click submit,processFormData()

Then check the validate and store the data if validate

Set the isValidate is false because when first in the page nothing filled.

check the validate of form with checkValidility()

if not validate, give a error message and stop

if the passwords are not matched, give a message and stop. otherwise, different message

if the password is matched and also validated true, the register is processed.

After submitting the form, all the data should be stored in the database.

Grab all the values from the form.

👉Follow me for more useful web development content! love sharing🥰

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*