Can I use parameters in form validation?

Question

I'm trying to implement a simple form validation, but I can't make it work with parameters somehow.

This is the code for just one input:

const firstName = document.getElementById("first-name");
const nameRegex = /^[a-zA-Z]{2,15}$/;
firstName.addEventListener("blur", validate(firstName));

function validate(id) {
    let re = "";
    switch (id) {
        case firstName:
            re = nameRegex;
            break;
        case lastName:
            re = nameRegex;
            break;
        case email:
            re = emailRegex;
            break;
        case password:
            re = passwordRegex;
            break;
    }

    if (!re.test(id.value)) {
        id.parentElement.classList.add("error");
        id.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        id.parentElement.classList.remove("error");
        id.parentElement.nextElementSibling.classList.add("hide");
    }
}

It looks like the code can't tap into the id.value field.

For reference this code works fine:

function validateFirstName() {
    if (!nameRegex.test(firstName.value)) {
        firstName.parentElement.classList.add("error");
        firstName.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        firstName.parentElement.classList.remove("error");
        firstName.parentElement.nextElementSibling.classList.add("hide");
    }
}

Can anyone point me in the right direction? (I only want to use vanilla JS)

Answer 1

You can benefit from the fact that this in an event handler added with .addEventListener() will be the element that triggered the event.

Instead of id you can use this in validate()

function validate() {
    let re = "";
    switch (this) {
        case firstName:
            re = nameRegex;
            break;
        case lastName:
            re = nameRegex;
            break;
        case email:
            re = emailRegex;
            break;
        case password:
            re = passwordRegex;
            break;
    }

    if (!re.test(this.value)) {
        this.parentElement.classList.add("error");
        this.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        this.parentElement.classList.remove("error");
        this.parentElement.nextElementSibling.classList.add("hide");
    }
}

Slightly reduced example:

const firstName = document.getElementById("first-name");
firstName.addEventListener("blur", validate);

const lastName = document.getElementById("last-name");
lastName.addEventListener("blur", validate);

const nameRegex = /^[a-zA-Z]{2,15}$/;

function validate() {
    let re;
    
    switch (this) {
        case firstName:
            re = nameRegex;
            break;
        case lastName:
            re = nameRegex;
            break;
    }

    if (!re.test(this.value)) {
        this.parentElement.classList.add("error");
        this.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        this.parentElement.classList.remove("error");
        this.parentElement.nextElementSibling.classList.add("hide");
    }
}

.error { color: red }
.hide { display: none }

<form>
  <div>
    First Name: <input type="text" name="first-name" id="first-name" />
  </div>
  <span>lorem ipsum</span>
  <div>
    Last Name: <input type="text" name="last-name" id="last-name" />
  </div>
  <span>lorem ipsum</span>
</form>

Answer 2

First of all, the getElementById returns a HTMLInputElement and not a the actual ID of the element.

const firstName = document.getElementById("first-name"); // typeof HTMLInputElement

As mentioned by the other comments, your event listener is bound to the return value of validate(firstName), which is void or undefined.

What you need to do is tell the event listener to fire the function when the blur event is occuring on the element.

firstName.addEventListener("blur", validate); // Bind your entire validate function instead of the return value

Now you must change the logic inside your validate function, to distinquish between the different inputs.

function validate(event) {
  // event.target is your entire element
  // event.target.value is the current value
  // event.target.id is the string id ie. first-name

  switch(event.target.id) {
    case 'first-name'
      re = nameRegex; // Assigns your nameRegex
    break;
  }

  if(re === '') {
    return; // Do nothing as we have no regex to validate with
  }

  // Your other code here
}