Conditional javascript input field validation

Question

I am currently working on a project that requires me to do a javascript form validation on a form that contains conditional input fields ( the visitor can choose whether to log in via a user number or email address ). Both input fields are separate and I need to do the following:

If visitor chooses to log in via option A ( user number ), the validation should only take into account the id of input field A ( the user number ) and not require validation for the other field ( email address ).

And vice versa, if visitor chooses option B.

The code I am currently using for validation:

function empty() {
var x;
x = document.getElementById("user_number").value;
if (x == "") {
    MsgBox('Your user number is required.', 'ERROR');
    return false;
}
var y;
y = document.getElementById("email").value;
if (y == "") {
    MsgBox('Your email address is required.', 'ERROR');
    return false;
}

}

And the form trigger event:

<form method="POST" id="accordion-top-form" action="" onsubmit="return empty();">

I need to expand the current script to check if either field A or field B has been filled in when submitting the form ( and then automatically disable validation for the other field ).

How do I do that?

Answer 1

You could use the following:

var forms = {
  user: 0,
  email: 1
};

function whichForm() {
  var userForm = document.getElementById("user_number").value;
  var emailForm = document.getElementById("email").value;

  if (userForm && emailForm) {
    //user wrote in both forms, something is wrong
  } else if (!userForm && !emailForm) {
    //user didn't fill in any form
  } else {
    return userForm ? forms.user : forms.email;
  }
}

function empty(form) {
  if (form === forms.user) {
    // check if the user number form is empty
    var userForm = document.getElementById("user_number").value;
    if(userForm.trim() === "") {
      // possibly do more validation
      // return true or false based on whether you want to submit
    }
  } else if (form === forms.email) {
    // check if the email form is empty
    var emailForm = document.getElementById("email").value;
    if(emailForm.trim() === "") {
       // possibly do more validation
      // return true or false based on whether you want to submit
    }
  } else {
    // something is wrong, invalid parameter,
    // handle here
    return false
  }
}

function validate() {
  return empty(whichForm());
}

And change your form so that it calls return validate() inline or just validate as a submit handler.

Answer 2

Sounds like this would be enough?

I would personally not call the function empty since you want to return true to allow submission

function empty() {
  var x = document.getElementById("user_number").value,
      y = document.getElementById("email").value;
  x = x?x.trim()|| ""; // handle null and all blanks
  y = y?y.trim()|| "";

  if (x === "" && y === "") {
    alert("Please enter user number or email")
    return false;
  }
  // optional
  if (x && y) { // both entered
    alert("Please enter EITHER user number or email")
    return false;
  }

  if (x) return isValidUser(x); // each of these functions needs to return boolean
  if (y) return isValidEmail(y);

  // likely not going to happen
  return false;
}