How to check if all arrow functions are true?

user_10573831 0
Viewed 301

I'm creating a form validator. And I only want to go to the next page if all four validators are true. I've created four arrow functions for the validators.

const nameIsValid = name => !name.match(nameRegX);
const mailIsValid = mail => mail.match(mailRegX);
const phoneIsValid = phone => phone.match(phoneRegX);
const postalIsValid = postal => postal.match(postRegX);

Every arrow function is tied to a event listener onchange in the input. This looks like this.

inputs[0].onchange = function() {
    var validateName = nameIsValid(name.value);
    animator(validateName, 0, isNameTrue);  
}

Then all four times inputs[1], [2] & [3].

In the function you see the third argument of the animator is isNameTrue. These are variables I've declared before the function with this:

var isNameTrue = false;
var isMailTrue = false;
var isPhoneTrue = false;
var isPostalTrue = false;

Then if the arrow function is true, I want to turn these values true as well, which I do by this function.

function animator(validity, i, isTrue){
    var error = document.querySelectorAll(".form-error");
    var correct = document.querySelectorAll(".form-display");

    if (validity){
        correct[i].classList.add("animate")
        error[i].classList.remove("animate")
        isTrue = true;


    } else {
        error[i].classList.add("animate")
        correct[i].classList.remove("animate")
        isTrue = false;
    }
}

Then when the user clicks on the submit button, I only want the next action when all four are true.

inputs[4].onclick = function(){
    if (isNameTrue && isMailTrue && isPhoneTrue && isPostalTrue){
        console.log("We are all true");
    } else {
        console.log("We are not true!")
    }

}

However, they're always false.

How can I properly check if all four are true?

validation forms javascript
1 Answers

boolean are passed by value,hence, the reference is not same which means even if you change the value in the animator function, the value of the variable passed will not change.

You can update your code to following

inputs[0].onchange = function() {
    var validateName = nameIsValid(name.value);
    isNameTrue = validateName; // <---- Set your value here and do not pass to the function
    animator(validateName, 0);  
}
user_11323540
Related