Coders Packet

JavaScript Form Validator

By Abhishek Upmanyu

Here in the enclosed attachment is the form validator using JavaScript, HTML, and CSS. The form consists of four fields: Username, Email, password, and confirm password then a submit button.

The enclosed project in the zip file is JAVASCRIPT FORM VALIDATOR. The form validator works on a live server or any other browser. The form consists of four inputs and a submit button. The inputs are as follows: Username, Email, Password, Confirm Password. Each input has a specific rule attached to it through JavaScript.

The rules for the input fields are as follows: the username must be of at least three characters, the email should be in a proper format i.e. [email protected], the password must be 6 characters and not less than that.

The next slot is for confirming the password wherein the user must input the same password as the last field. Then the user can tap on the submit button to save the details entered on the console page which can be accessed through the chrome dev tool of chrome browser.

If the fields are correctly entered as per the rules, then the input field will prompt green color and the details will be saved. On the other hand, if the details are wrong as per the rules, then the red color will be prompted along with the rule. Then the user is expected to fill in the input fields with respect to the rule prompted in red.

The methodology adopted for the formation of this project is: first I created an HTML code for the input with a heading for each input field. Second, to add some style and proper formation, I used CSS to make the heading of each input field-aligned and bigger so that the user can easily interpret. Thirdly, to add the interactive-ness of the project like the green and red box prompt, the functionality of the submit button, I used JavaScript.

The HTML file is named: ‘index.html’, the CSS file is named: ‘style.css’ and the JavaScript file is named: ‘script.js’. Each file has a reference to another file and they all work together.

 

Form with wrong information

 

Form with Correct Input

This is how the form validator works.

Download Complete Code

Comments

No comments yet