I am building a application using pure javascript approach that validates a registration form. The form has five controls: username, password and retype password fields, a checkbox that allows the user to toggle the password visibility and submit button.
I am having some issues trying to understand why my code is not working properly on the browse.
- The error messages are not showing.
- The button submit is not sending to the confirmation page " I've tried constantly to solve it but no result".
- The check password match is not working.
I hope I explained well.
Many thanks.
Here is the second HTML page for the form submission.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section>
<p>Form Successfully Submitted</p>
</section>
</body>
</html>Here is my javascript code CSS AND HTML.
function handleInvalidities(input) { // Takes input field as parameter
let errMsg = "";
if (!input.validity.paternMismatch) { // Check for wrong format
errMsg = "Invalid entry. Enter your details in the format shown.";
}
if (input.validity.valueMissing) {
errMsg = "Invalid entry. This field can not be blank. Please enter a value."; // Check for missing fields
}
return errMsg;
}
function displayInvalidities(errMsg, elem) {
let elemPos = document.getElementById(elem);
let errElem = document.createElement("span");
errElem.setAttribute("class", "error");
let errText = document.createTextNode(errMsg);
errElem.appendChild(errText);
elemPos.parentNode.insertBefore(errElem, elemPos.nextSibling);
}
function cleanUpErrors() {
let errors = document.getElementsByClassName("error");
for (let i = 0; i < errors.length; i++) {
errors[i].style.display = "none"; // Clear up existing error messages
}
}
function Toggle() {
var temp = document.getElementById("password");
if (temp.type === "password") {
temp.type = "text";
} else {
temp.type = "password";
}
}
function checkPasswordMatch (registerForm) {
let originalPassword = registerForm.password.value;
let retypedPassword = registerForm.retypedpassword.value;
if (originalPassword === retypedPassword) {
return true;
} else {
let passwordMatchError = document.getElementById("passwordmatcherror");
passwordMatchError.setAttribute("class", "error");
passwordMatchError.innerHTML = ("Passwords do not match. Please retype");
return false;
}
}
window.onload = () => {
let registerForm = document.getElementById("regsiterdetails"); // Get the form and add event listener to it
registerForm.addEventListener("submit",
(event) => {
if (!checkPasswordMatch(registerForm)) {
event.preventDefault(); // If no match stop form submitting
}
}, false);
}body {
font-family: Verdana;
font-size: 0.75rem;
}
h1 {
font-size: 1.25rem;
}
h2 {
font-size: 1rem;
}
label {
display: block;
font-weight: bold;
margin: 0.25rem 0 0.25rem 0;
}
#showpasswordslabel {
display:inline;
}
#showpasswords {
width: 18px;
height: 18px;
}
.error {
width:15%;
min-width: 240px;
display: block;
padding: 0.5rem;
font-size: 0.75rem;
color: white;
background-color: #900;
margin: 0.5rem;
border: 2px solid transparent;
}
input:not(#showpasswords) {
width:15%;
min-width: 240px;
height: 10px;
padding: 10px 0 10px 10px;
margin: 0.5rem;
border: 2px solid transparent;
border-radius: 5px;
box-shadow: 2px 2px 2px #B2B2B2, -1px -1px 1px #292929;
position: relative;
}
button {
margin-top: 1rem;
border: none;
background: #3498db;
width: 80px;
height: 35px;
padding: 0;
margin-top: 16px;
cursor: pointer;
box-shadow: 1px 1px 1px #292929, -1px -1px 1px #B2B2B2;
border-radius: 5px;
transition: all .3s;
color: white;
font-weight: 700;
margin-left: 0.5rem;
}
button:hover {
background: #2980b9;
}
button:focus {
box-shadow: 1px 1px 1px #B2B2B2, -1px -1px 1px #292929;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<h1>Form: validated using Javascript</h1>
<p>Try entering the following:</p>
<ul>
<li>Password longer or shorter than 8 characters and/or without an uppercase, lowercase or a numeric.</li>
<li>Passwords that do not match</li>
</ul>
<h2>Register</h2>
<p>* = Required Field</p>
<div id="formcontainer">
<form id="regsiterdetails" action="fma_t3confirm.html" onsubmit="validateForm(event)"></form>
<div>
<label for="username">* Username:</label>
<input type="text" id="username" required>
</div>
<div>
<label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and one
numeric):</label>
<input type="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$" required>
<input type="checkbox" id="showpasswords" onclick="Toggle()">
<label id="showpasswordslabel" for="showpasswords">Show passwords</label>
</div>
<div>
<label for="retypedpassword">* Retype your password:</label>
<input type="password" id="retypedpassword">
<span id="passwordmatcherror"></span>
</div>
<div>
<button type="submit" id="registerButton">Register</button>
</div>
</form>
</div>
</section>
</body>
<script src="scripts/fma_t3.js"></script>
</html>