Loop to continuously check input form values

Question

I have a contact input form in which I'm trying to add visual validation to, for example - If an input box is left empty or the values are unacceptable (invalid email address) the border will turn red and provide error message.

I achieved this however I want to reduce the amount of code. To do this I have created a for loop which can be seen below, however the loop runs through the inputs array and ends rather than restarted and continually checking.

Code:

// Name input values 
const inputName = document.getElementById('inputName'); // Input field
const nameError = document.getElementById('nameError'); // Error message

// Email input values
const inputEmail = document.getElementById('inputEmail');
const emailError = document.getElementById('emailError');


// Number input values
const inputNumber = document.getElementById('inputNumber');
const numberError = document.getElementById('numberError');

// Input validation methods
const stringCheck = /\S/; // Check if value contains characters 
const nameValidation = /^[a-zA-Z\s]*$/; // Check if valid name entered
const emailValidation = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; // Check if valid email entered
const numberValidation = /^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i; // Check if valid phone number entered

// Multidemnsional array of inputs and their values
var inputs = [
    [inputName, nameValidation, nameError, 'Invalid name'],
    [inputEmail, emailValidation, emailError, 'Invalid email address'],
    [inputNumber, numberValidation, numberError, 'Invalid phone number']
];

// Border style properites 
var errorBorder = "2px solid #ff0000"; // Red 
var normalBorder = "1px solid #FFFFFF"; // CSS document style


for(i = 0; i < inputs.length; i ++){

var inputType = inputs[i][0];
var inputValidation = inputs[i][1];
var inputError = inputs[i][2];
var errorMessage = inputs[i][3];

    inputType.addEventListener('blur', () => {
        const validation = inputValidation.test(inputType.value);
        inputCheck = stringCheck.test(inputType.value);

        if(inputCheck == false){
            inputType.style.border = errorBorder;
            inputError.innerHTML = "Required field"; 
        } else if(validation !== true){
            inputType.style.border = errorBorder;
            inputError.innerHTML = errorMessage;
        } else {
            inputType.style.border = normalBorder;
            inputError.innerHTML = "";
        }
    })
}```


Thanks in advance

Answer 1 · 2018-03-06T18:35:56Z

March 6, 2018 6:35pm

You shouldn't need a loop to achieve that functionality. What you want to do is attached an event listener on each of the inputs using the 'input' event handler. Anytime the value of the input changes, the event listener will fire.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

https://developer.mozilla.org/en-US/docs/Web/Events/input

inputName.addEventListener('input', function() {
  // Code goes here
});

Answer 2 · 2018-03-08T15:01:41Z

March 8, 2018 3:01pm

Solved the problem..

I found out that in the previous code, all inputs shared the same value of i.
I needed to give each of the inputs their own local copy of i.
This could be done but declaring i using 'let' instead of 'i = 0' (var). So i is localised to each cycle of the loop, so the i variable to distinct for each cycle through!

Welcome to the Treehouse Community

Looking to learn something new?

Jordan Wood

Jordan Wood

Loop to continuously check input form values

2 Answers

Adam Pengh

Adam Pengh

Jordan Wood

Jordan Wood

Jordan Wood

Jordan Wood