This is a project from the "JavaScript Web Projects: 20 Projects to Build Your Portfolio" class on Udemy (https://www.udemy.com).
This project was started June 29, 2021 and completed July 10, 2021.
The objective of this project was to create a form validator using HTML5 input attributes and JavaScript to provide validation of input fields on a registration form. Feedback provided to the user included using patterns to enforce input formats, the require attribute to indicate required inputs, and success or error messages to provide feedback to the user.
This project was only tested in Firefox Developer Edition Version 90.0b12 (64-bit).
The following modifications and enhancements can be implemented in future versions to address or correct implementation issues or functionality:
-
add a button to clear the form
Currently, the form does not clear itself when the 'Submit' button is clicked.
-
clear the form when the page is reloaded
Reloading the page does not clear all of the input fields. Currently, when the page is reloaded, only the 'Create Password' and 'Confirm Password' fields are cleared and the message box is returned to it's original state.
-
Preventing default behavior for an event using Event.preventDefault() when working with a form's submit event (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
-
Manipulating CSS properties in JavaScript (see CSS Properties Reference https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)
Example:
password1El.style.borderColor = 'green'; message.textContent = 'Successfully Registered!';
-
The use of display: flex and flex-direction: row | column to control layout
-
input attributes:
-
minlength | maxlength
-
type attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-
required
-
placeholder
-
pattern (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern)
-
title
-
-
-
Original font: Sen
-
Actual font: Encode Sans SC
-