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
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:
- Multi-step Signup Form UI Design
- Animated Login & Registration Form
- Responsive Contact us UI Form Design
- Login & Signup Form with PHP & MySQL
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.
