Use consistent naming for elements.

fdb · fdb · commit 6ffb3454eec9 · 2018-07-01T17:16:33.000+02:00
diff --git a/Projects/payment-form/js/validate.js b/Projects/payment-form/js/validate.js
@@ -1,43 +1,43 @@
 const VISA_REG_EX = /^(4[0-9]{15})$/;
 
 function onChangeEmailField(e) {
-    const field = e.target;
-    const parent = field.parentElement;
-    const errorSpan = parent.querySelector('.error');
-    const value = field.value;
+    const $field = e.target;
+    const $parent = $field.parentElement;
+    const $error = $parent.querySelector('.error');
+    const value = $field.value;
     const isValid = value.includes('@');
     if (isValid) {
-        parent.classList.remove('invalid');
-        errorSpan.innerHTML = '';
+        $parent.classList.remove('invalid');
+        $error.innerHTML = '';
     } else {
-        parent.classList.add('invalid');
-        errorSpan.innerHTML = 'Email address is not valid.';
+        $parent.classList.add('invalid');
+        $error.innerHTML = 'Email address is not valid.';
     }
 }
 
 function onChangeCardField(e) {
-    const field = e.target;
-    const parent = field.parentElement;
-    const errorSpan = parent.querySelector('.error');
-    let value = field.value;
+    const $field = e.target;
+    const $parent = $field.parentElement;
+    const $error = $parent.querySelector('.error');
+    let value = $field.value;
     value = value.replace(/\s/g, '');
     const isValid = VISA_REG_EX.test(value);
     if (isValid) {
-        parent.classList.remove('invalid');
-        errorSpan.innerHTML = '';
+        $parent.classList.remove('invalid');
+        $error.innerHTML = '';
     } else {
-        parent.classList.add('invalid');
-        errorSpan.innerHTML = 'Your card number is invalid.';
+        $parent.classList.add('invalid');
+        $error.innerHTML = 'Your card number is invalid.';
     }
 }
 
 function onInputCardField(e) {
-    const field = e.target;
-    let value = field.value;
+    const $field = e.target;
+    let value = $field.value;
     value = value.replace(/[^0-9]+/g, '');
     value = value.replace(/(.{4})/g, '$1 ');
     value = value.trim();
-    e.target.value = value;
+    $field.value = value;
 }
 
 document.querySelector('#email-field').addEventListener('change', onChangeEmailField);
