Form Validator
Step by Step Algorithm:
1. In the body of the HTML file, create a form element with an id attribute of "signup-form".
2. Inside the form element, create a label element with a for attribute of "email" and some text content.
3. Below the label element, create an input element with a type attribute of "email", an id attribute of "email", and a required attribute.
4. Below the email input element, create another label element with a for attribute of "password" and some text content.
5. Below the label element, create an input element with a type attribute of "password", an id attribute of "password", a required attribute, and a minlength attribute of "8".
6. Below the password input element, create another label element with a for attribute of "password-confirm" and some text content.
7. Below the label element, create an input element with a type attribute of "password", an id attribute of "password-confirm", a required attribute, and a minlength attribute of "8".
8. Below the password-confirm input element, create an input element with a type attribute of "submit" and a value attribute of "Sign up".
9. Below the form element, create a div element with an id attribute of "error-message".
10. Save the HTML file and open it in a web
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form Validator</title>
</head>
<body>
<form id="signup-form">
<label for="email">Email:</label><br>
<input type="email" id="email" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" required minlength="8"><br>
<label for="password-confirm">Confirm password:</label><br>
<input type="password" id="password-confirm" required minlength="8"><br>
<input type="submit" value="Sign up">
</form>
<div id="error-message"></div>
<script src="app.js"></script>
</body>
</html>
CSS:
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
form {
width: 300px;
margin: 10% auto;
text-align: left;
font-family: sans-serif;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="email"], input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
width: 100%;
background-color: lightblue;
border: none;
padding: 14px 20px;
margin: 8px 0;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: skyblue;
}
#error-message {
color: red;
margin-top: 10px;
}
Step by Step Algorithm:
1. Select the form element from the HTML document using the getElementById method and store it in a variable.
2. Add an event listener to the form element that listens for a "submit" event and calls an anonymous function when the event is triggered.
3. Inside the anonymous function, prevent the form from being submitted by calling the preventDefault method of the event object.
4. Select the email, password, and password-confirm input elements from the HTML document using the getElementById method. Store the values of these elements in variables.
5. Validate the form by checking that the email input is not an empty string, the password input is not an empty string, and the password-confirm input matches the password input. If any of these checks fail, call the showErrorMessage function with an appropriate error message.
6. If all of the checks pass, call the showErrorMessage function with an empty string as an argument and submit the form using the submit method of the form element.
7. Define the showErrorMessage function, which takes a message as an argument and displays it to the user using the innerHTML property of the error-message div element.
Java Script:
document.getElementById('signup-form').onsubmit = function(event) {
// prevent form from being submitted
event.preventDefault();
// get user input
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var passwordConfirm = document.getElementById('password-confirm').value;
// validate input
if (email == '') {
showErrorMessage('Please enter an email address');
} else if (password == '') {
showErrorMessage('Please enter a password');
} else if (password != passwordConfirm) {
showErrorMessage('Passwords do not match');
} else {
showErrorMessage('');
// form is valid, submit it
this.submit();
}
};
function showErrorMessage(message) {
var errorElement = document.getElementById('error-message');
errorElement.innerHTML = message;
}
You can improve this project in your own version.
We are ready to release more projects please support us by sharing and visiting webdevmonk