Login Form Validation in HTML CSS & JavaScript

Login Form Validation in HTML CSS & JavaScript

Hey friends, today in this blog you’ll learn how to create a Login Form Validation with Shake Effect in HTML CSS & JavaScript. In the earlier blog, I’ve shared how to create Login & Registration Form using HTML & CSS and now it’s time to validate the login form using JavaScript.

Form Validation in HTML means to check that the user’s entered credential — Email, Username, Password is valid and correct or not. User will not get access to the restricted page until he/she entered a valid email and password. And, Shake Effect in this Login Form means when the user clicks on the login button without entering their email and password then the input boxes shake to inform the user that these fields can’t be blank.

In our Login Form Validation in HTML & JavaScript, as you can see on the image preview, there is a login form that holds login text, two input fields, a login button, etc. at first those login errors are not shown but when the user clicks on the login button without entering their email & password then there is appear these errors with shake effect.

Once the user starts entering their credentials in the input fields then these errors will automatically hide. If you are feeling difficulties with what I’m saying then you can watch a video tutorial of this Login Form Validation in HTML with Shake Effect.

Video Tutorial of Form Validation in HTML & JavaScript

Video Tutorial of Form Validation in HTML & JavaScript

In the video, you’ve clearly seen how this login form looks like and how it show an error when the user tries to log in without entering an email and password or without entering a valid email address. This login form is created only for design purposes so when you entered a valid email & password and click on the login button then these details won’t send or submit anywhere.

If you want to send these details anywhere and want to receive them using PHP then you’ve to put that PHP file URL inside the action attribute of the form tag. I've already shared a blog on how to create Login & Registration Form with Email Verification using PHP. If you want to make this form workable and dynamic then don't forget to read the mentioned blog.

You might like this:

Form Validation in HTML & JavaScript [Source Codes]

To create this program [Form Validation in HTML & JavaScript]. First, you need to create three Files two HTML Files, and one JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Form Validation in HTML from this given download button. Click here to download code files.

Originally published at https://www.codingnepalweb.com on June 4, 2021.

--

--

--

CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SVG: The Hard Parts — I

Building a Progress Bar component using ReactJS & Styled Components

Next.js Firebase authentication— Including SSR

Top 5 React Form Libraries in 2021

PyScript — Power of Python in your Browser

Home page image of Pyscipt Website

What is React Fragment

Beginners API with Nodejs and MongoDB

DDD in Node/Typescript, the functional way. Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodingNepal

CodingNepal

CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

More from Medium

“==” vs “===” in JavaScript

JavaScript Optional chaining (?.)

Text to speech in 3 lines of JavaScript with npm

Basics of JavaScript and Version Controlling