<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container" id="memberlogin">
<div class="row">
<div class="col">
<img src="learning.jpg" />
</div>
<div class="col">
<h2 class="fw-bold text-center">Memebership Login</h2>
<p class="text-center">Please Complete all Fields below</p>
<form>
<!----first name--->
<div class=" form-group row my-2">
<label for="firstName" class="col-sm-3 col-form-label">First Name:</label>
<div class="col-sm-5">
<input class="form-control" id="fName" type="text" required />
</div>
</div>
<!---Last Name-->
<div class=" form-group row my-2 ">
<label for="LastName" class="col-sm-3 col-form-label">Last Name:</label>
<div class="col-sm-5">
<input class="form-control" id="lName" type="text" required/>
</div>
</div>
<!--Address-->
<div class=" form-group row my-2 ">
<label for="Address" class="col-sm-3 col-form-label">Address:</label>
<div class="col-sm-5">
<input class="form-control" id="address" type="text" required/>
</div>
</div>
<!--City-->
<div class=" form-group row my-2 ">
<label for="city" class="col-sm-3 col-form-label">City:</label>
<div class="col-sm-5">
<input class="form-control" id="city" type="text" required />
</div>
</div>
<!--Postal code -->
<div class=" form-group row my-2 ">
<label for="Postal Code" class="col-sm-3 col-form-label">Postal Code:</label>
<div class="col-sm-5">
<input class="form-control" id="pCode" type="text" true/>
</div>
</div>
<!--Province-->
<div class=" form-group row my-2 ">
<label for="Province " class="col-sm-3 col-form-label">Province:</label>
<div class="col-sm-5">
<select class="form-control" name="province" id="province" required>
<option value="QC">QC</option>
<option value="ON">ON</option>
<option value="MN">MN</option>
<option value="SK">SK</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
</select>
</div>
</div>
<!--Age-->
<div class=" form-group row my-2">
<label for="Age" class="col-sm-3 col-form-label">Age:</label>
<div class="col-sm-5">
<input class="form-control" id="age" type="number" min="18"required />
</div>
</div>
<!--Email-->
<div class=" form-group row my-2">
<label for="Email" class="col-sm-3 col-form-label">Email:</label>
<div class="col-sm-5">
<input class="form-control" id="email" type="text"required />
</div>
</div>
<!--Password-->
<div class=" form-group row my-2 ">
<label for="password" class="col-sm-3 col-form-label">Password:</label>
<div class="col-sm-5">
<input class="form-control" id="password" type="text"required />
</div>
</div>
<!--Confirm Password-->
<div class=" form-group row my-2 ">
<label for="confirm-password" class="col-sm-3 col-form-label">Confirm Password:</label>
<div class="col-sm-5">
<input class="form-control" id="cPassword" type="text" required/>
</div>
</div>
<!--Submit Button-->
<div class="form-group row my-5">
<button class="btn btn-primary col-sm-3" type="submit" id="submit">Register Now</button>
<!--Clear Button-->
<div class="col-sm-5">
<button class="btn btn-primary " type="reset" id="reset">Reset Form</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="validation.js"></script>
</body>
</html>
js
//Collection of all inputs
const firstName = document.querySelector("#fName");
const lastName = document.querySelector("#lName");
const address = document.querySelector("#address");
const city = document.querySelector("#city");
const pCode = document.querySelector("#pCode");
const age = document.querySelector("#age");
const email = document.querySelector("#email");
const password = document.querySelector("#password");
const cPassword = document.querySelector("#cPassword");
const reset = document.querySelector("#reset");
//Regular expression
let regexpostalcode = /^ [a - z][0 - 9][a - z][0 - 9][a - z][0 - 9]$/;
let regexemail = /^([a-z A-Z\d\.-]+)@([a-z\d]+)\.([a-z\d]{2,8})$/;
let regexpassword = /^(?=.*[A-Z])(?=.*[0-9]).{6,}$/;
// seting default value to null for selectIndex
function Removedefault() {
const province = document.querySelector("#province");
province.selectedIndex = -1;
}
// checking the validity
function checkValidity() {
let formValidity = true;
if (regexpostalcode.test("pCode.value")==false) {
pCode.setCustomValidation("Please Enter the correct postal code");
formValidity = false;
}
else {
pCode.setCustomValidation("")
}
if (regexemail.test("email.value") == false) {
email.setCustomValidation("Please Enter the correct formatted email");
formValidity = false;
}
else {
email.setCustomValidation("");
}
if (regexpassword.test("password.value") == false) {
password.setCustomValidation("Please include One upperCase Letter and one digit");
formValidity = false;
}
if (password.value !== cPassword) {
password.setCustomValidation("Please make sure the passwords match");
cPassword.setCustomValidation("Please make sure the passwords match");
formValidity = false;
}
if (formValidity) {
alert("thank you for registering, your form was submitted successfully");
}
}
// creating eventlistener
function createEventListener() {
var submit = document.getElementById("submit");
if (submit.addEventListener) {
submit.addEventListener("click", checkValidity, false);
}
else if (submit.addEventListener) {
submit.addEventListener("onclick", checkValidity);
}
}
function setUpPage() {
Removedefault();
createEventListener();
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
I need help with validation function not working not sure why please help