-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
56 lines (47 loc) · 1.68 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const $form = document.querySelector('form');
const $firstName = document.querySelector('#first__name');
const $lastName = document.querySelector('#last__name');
const $email = document.querySelector('#email');
const $passWord = document.querySelector('#pass__word');
const $submitBtn = document.querySelector('button');
const isEmail = (email) => {
return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)
}
const error = ($input, errorMessage) => {
$input.parentNode.classList.add('error');
$input.parentNode.nextElementSibling.innerText = errorMessage;
$input.parentNode.querySelector('img').style.display = 'block';
}
const clearError = ($input) => {
$input.parentNode.classList.remove('error');
$input.parentNode.nextElementSibling.innerText = "";
$input.parentNode.querySelector('img').style.display = 'none';
}
const validate = () => {
const firstNameValue = $firstName.value.trim()
const lastNameValue = $lastName.value.trim()
const emailValue = $email.value.trim()
const passwordValue = $passWord.value.trim()
clearError($firstName);
clearError($lastName);
clearError($email);
clearError($passWord);
if (!firstNameValue) {
error($firstName, "First Name cannot be empty");
}
if (!lastNameValue) {
error($lastName, "Last Name cannot be empty");
}
if (!emailValue) {
error($email, "Email Address cannot be empty");
} else if (!isEmail(emailValue)) {
error($email, "Looks like this is not an email")
}
if (!passwordValue) {
error($passWord, "Password cannot be empty");
}
}
$form.addEventListener('submit', (e) => {
e.preventDefault();
validate()
})