Lab 4: Javascript form validation

Instructions

  • All the buttons should be working;
  • If the button needs some back-end data, show a message using the alert() function;
  • Forms inputs must be validated when you click the submit button or move from one input to another(optional).

In this lab, we will see how to validate some of the most common inputs and return an error message before sending the data. Here is a simple example of a form.
We won't discuss the HTML/CSS part, but if you are interested you can find the complete code here.

JS

let
Name = document.querySelector("#Name"),
User_Name = document.querySelector("#User_Name"),
Password = document.querySelector("#Password"),
Confirm_Password = document.querySelector("#Confirm_Password"),
Birthdate = document.querySelector("#Birthdate"),
Email = document.querySelector("#Email"),
Phone_Number = document.querySelector("#Phone_Number"),
Submit_Btn = document.querySelector("#Submit_Btn"),
small = document.querySelector("small");

Explanation

  • First, we have to fetch all the inputs that we want to check their inputs.
  • We also have to fetch the button to change its default behavior.
  • Finally, a small tag is at the (under the submit button) to show eventual errors.
  • At first, this small tag is empty.

JS

Submit_Btn.addEventListener("click", (event) => {
event.preventDefault();
checkInputs();
});

Explanation

  • Here, we are just registering an event on the submit button.
  • It will first stop the default behavior on this button (using event.preventDefault();) which is sending data to the server.
  • Then, it will call a function (using checkInputs();) that we implemented below to check all the input fields.

JS

function checkInputs() {
// get the values from the inputs
const NameValue = Name.value.trim();
const User_NameValue = User_Name.value.trim();
const PasswordValue = Password.value.trim();
const Confirm_PasswordValue = Confirm_Password.value.trim();
const BirthdateValue = Birthdate.value.trim();
const EmailValue = Email.value.trim();
const Phone_NumberValue = Phone_Number.value.trim();
.........

Explanation

  • At the beginning of the checkInputs() function, we will retrieve the values inside the input fields.
  • After that, we use the built-in trim() method to delete the blank space before and after the text.
  • We declared these values as constants, so they won't be altered before checking them.

JS

if (NameValue === "") {
// show error
// add error class
setErrorFor(Name, "Name cannot be blank");
} else {
// add success class
setSuccessFor(Name);
}

Explanation

We will start by checking the Name input field. If it is empty, we will call a function (using setErrorFor();) to show an error message and add an error class to the input field. Otherwise, we will call another function (using setSuccessFor();) to add a success class to the input field.
  • These functions are implemented below.
  • They will add a class to the input field to change its color and show an error message.
  • They will also change the small tag to show the error message.
See the details in the code below.

JS

function setErrorFor(input, message) {
// add error message inside small
small.innerText += "\n" + message;

// add error class
input.className += " error";
}

function setSuccessFor(input) {
input.className += " success";
}

Explanation

Here is the implementation of the setErrorFor() and setSuccessFor() functions.
  • They will add a class to the input field to change its color and show an error message.
  • They will also change the small tag to show the error message.
The error class will change the color of the input field to red and the success class will change it to green.
See the details in the code below.

JS

.error {
color: red;
background-color: rgb(255 0 0/ 0.1);
border: 1px solid red;
}
.success {
color: green;
background-color: rgb(0 255 0/ 0.1);
border: 1px solid green;
}

Explanation

Here the two classes that we will add to the input fields.
They will change the border color and the background color of the input field, as well as the text color.

JS

if (EmailValue === "") {
setErrorFor(Email, "Email cannot be blank");
} else if (!isEmail(EmailValue)) {
setErrorFor(Email, "Email is not valid");
} else {
setSuccessFor(Email);
}

Explanation

In the case of the email and the phone number, we will use a regular expression to check if the input is valid.
These regular expressions are implemented with both isEmail() function and isPhone_Number() function.
  • These functions will return true if the input is valid and false otherwise.
  • They are implemented below.

JS

function isEmail(Email) {
return /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test( Email );
}
function isPhone_Number(Phone_Number) {
return /^([0]{1}[5-7]{1}[0-9]{8})$/.test(Phone_Number);
}

Explanation

These functions will return true if the input is valid and false otherwise.
They use regular expressions to check the input.
.test() is a built-in method that will return true if the input matches the regular expression and false otherwise.