https://ir-20-js-projects.netlify.app/projects/01-form-validator/script.js

1// Get HTML elements
2const form = document.querySelector('form');
3const username = document.getElementById('username');
4const email = document.getElementById('email');
5const password = document.getElementById('password');
6const passwordRepeat = document.getElementById('password-repeat');
7
8
9// Load Event Listeners
10username.addEventListener('blur', () => validateUsername(username));
11email.addEventListener('blur', () => validateEmail(email));
12password.addEventListener('blur', () => validatePassword(password));
13passwordRepeat.addEventListener('blur', () => validatePasswordConfirmation(passwordRepeat, password));
14form.addEventListener('submit', e => {
15    e.preventDefault();
16
17    validateUsername(username);
18    validateEmail(email);
19    validatePassword(password);
20    validatePasswordConfirmation(passwordRepeat, password);
21})
22
23
24
25// Validate Fields
26function validateUsername(input) {
27    if (!validateField(input, input.value.length !== 0, 'Username is required')) return;
28    if (!validateField(input, input.value.length >= 3, 'Username must be at least 3 characters')) return;
29    if (!validateField(input, input.value.length <= 15, 'Username must not exceed 15 characters')) return;
30}
31
32function validateEmail(input) {
33    const emailRegex = /^[^@\s]+@[^@\s\.]+\.[^@\.\s]+$/;
34    if (!validateField(input, input.value.length !== 0, 'Email is required')) return;
35    if (!validateField(input, emailRegex.test(email.value), 'Email is not valid')) return;
36}
37
38function validatePassword(input) {
39    if (!validateField(input, input.value.length !== 0, 'Password is required')) return;
40    if (!validateField(input, input.value.length >= 6, 'Password must be at least 6 characters')) return;
41}
42
43function validatePasswordConfirmation(confirmationPassword, originalPassword) {
44    if (!validateField(confirmationPassword, confirmationPassword.value.length !== 0, 'Password confirmation is required')) return;
45    if (!validateField(confirmationPassword, confirmationPassword.value === originalPassword.value, 'Password does not match')) return;
46}
47
48
49
50
51
52// Validation Functions
53function validateField(input, validationPattern, errorMessage) {
54    if (validationPattern) {
55        drawValidation(input, true, 'Validated!');
56        return true;
57    } else {
58        drawValidation(input, false, errorMessage);
59        return false;
60    }
61}
62
63function drawValidation(formInputElement, isValidated, message) {
64    if (isValidated) {
65        formInputElement.classList.add('validated');
66        formInputElement.classList.remove('validation-error');
67        formInputElement.nextElementSibling.style.visibility = 'hidden';
68    } else {
69        formInputElement.classList.add('validation-error');
70        formInputElement.classList.remove('validated');
71        formInputElement.nextElementSibling.style.visibility = 'visible';
72    }
73    formInputElement.nextElementSibling.textContent = message;
74}