Form-Validation-With-JavaScript/main.js at main · nodelabstudio/Form-Validation-With-JavaScript · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
const form = document.querySelector('form');
const email = document.querySelector('#email');
const country = document.querySelector('#country');
const zip = document.querySelector('#zip');
const password1 = document.querySelector('#password1');
const password2 = document.querySelector('#password2');
const errorMsgSpan = document.querySelector('.error');
const msgSpan = document.querySelector('.msg');

email.addEventListener('input', e => {
  if (!email.validity.patternMismatch) {
    // reset error message view
    errorMsgSpan.textContent = '';
    errorMsgSpan.className = 'error';
  } else {
    console.log(email.validationMessage);
    showError();
  }
});

country.addEventListener('input', e => {
  if (!country.validity.patternMismatch) {
    // reset error message view
    errorMsgSpan.textContent = '';
    errorMsgSpan.className = 'error';
  } else {
    console.log(country.validationMessage);
    showError();
  }
});

zip.addEventListener('input', e => {
  if (!zip.validity.patternMismatch) {
    // reset error message view
    errorMsgSpan.textContent = '';
    errorMsgSpan.className = 'error';
  } else {
    console.log(zip.validationMessage);
    showError();
  }
});

password1.addEventListener('input', e => {
  if (!password1.validity.patternMismatch) {
    // reset error message view
    inactiveField();
    errorMsgSpan.textContent = '';
    errorMsgSpan.className = 'error';
  } else {
    inactiveField();
    console.log(password1.validationMessage);
    showError();
  }
});

function matchFields(pass1, pass2) {
  pass1 = password1.value;
  pass2 = password2.value;
  if (pass1 === undefined || pass1 === null) {
    inactiveField();
  } else if (pass1 !== null && pass2 === pass1) {
    errorToggle();
    hideErrorMsg();
  } else {
    errorToggle();
    errorMsgSpan.textContent = 'Passwords must match.';
  }
}

password2.addEventListener('input', e => {
  if (!password2.validity.patternMismatch) {
    // reset error message view
    inactiveField();
    errorMsgSpan.textContent = '';
    errorMsgSpan.className = 'error';
  } else {
    inactiveField();
    console.log(password2.validationMessage);
    matchFields(password1.value, password2.value);
    showError();
  }
});

// event listeners for each element
form.addEventListener('submit', e => {
  e.preventDefault();
  if (!form.checkValidity()) {
    console.log(e);
    showError();
  } else {
    msgToggle();
    msgSpan.innerHTML = '✋ High Five!';
    clearFields();
  }
});

function inactiveField() {
  if (password1.value.length < 1) {
    password2.classList.add('inactive');
  } else {
    password2.classList.remove('inactive');
  }
}

inactiveField();

function clearFields() {
  email.value = '';
  country.value = '';
  zip.value = '';
  password1.value = '';
  password2.value = '';
}

function errorToggle() {
  errorMsgSpan.classList.add('active');
}

function msgToggle() {
  msgSpan.classList.add('active');
}

function hideErrorMsg() {
  errorMsgSpan.classList.remove('active');
}

function showError() {
  if (email.validity.patternMismatch) {
    errorToggle();
    errorMsgSpan.textContent =
      'All email addresses must consist of one or more letters (lower or upper case) or numbers, followed by the @ symbol, one or more letters, a period and a suffix address.  Example: BigRed25@bigcorp.eu';
  } else if (country.validity.patternMismatch) {
    errorToggle();
    errorMsgSpan.textContent =
      'Please enter a country name and use proper casing without hyphens or additional symbols. Example: United States';
  } else if (zip.validity.patternMismatch) {
    errorToggle();
    errorMsgSpan.textContent =
      'Please enter a valid U.S. postal code. If adding the additional 4 digits for delivery route, please add a hyphen before the number. Example: 92101-0458';
  } else if (password1.validity.patternMismatch) {
    errorToggle();
    errorMsgSpan.textContent =
      'Please enter a valid password between 4 and 30 characters in length including any of these symbols: !@#$%^&*';
  } else if (password2.validity.patternMismatch) {
    errorToggle();
    errorMsgSpan.textContent =
      'Please enter a valid password between 4 and 30 characters in length including any of these symbols: !@#$%^&*';
  }
}