Validating User Registration using JavaScript

[musanaeem]

Taking pre-approved front end scripts and code of the previous Django Project, I created a user registration validation in javascript by writing validations function in a .js file and linking it to the register.html file in a script tag.

Validations were made using regex matching and if conditions checking if criteria of the field's validation were met.

ID tags were added in html to get elements from document to manipulate using JavaScript.

Success is shown in green and errors are shown in red. each case throws it's own specific error.

A function "validate_username_or_name" was created to shorten code as username and name had very similar validation functions.

Note: The errors added were dynamically added using "small" tags if the validation failed. The "clear_errors()" function is responsible for clearing all previous error messages that are displayed on the page before a validation step begins.

Important:
Following code snippet was added to avoid multiple error outputs in html file:
<old_small = form_control.querySelector("small");
if (old_small)
old_small.remove();>

Screenshots of errors

All fields empty:

Name has something other than alphabets:

Name doesn't meet required length:

Incorrect email format:

Passwords not matching:

Password length not met:

Password doesn't contain both number and symbol:

Valid Input: