Question

I am trying to write a JS validation function for multi-select listboxes.

I have 4 multi-select listboxes and I need to check if the user has selected from atleast one listbox value. That is, out of 4 listbox, user should select from atleast 1 listbox (any number of values).

This is the function I am writing,

function validate(form)
{
    if ((document.getElementById("A").value=='') || (document.getElementById("B").value=='') || (document.getElementById("C").value=='') || (document.getElementById("D").value=='')) 
    {                                           
        if (0 < message.length) { message += "\n"; }
        message += "You must select atleast one of the listbox items ";

    }
}

I know the problem is with the OR condition. It does not allow to save the form unless 1 value from each of these listbox is selected.

But I need to check for minimum 1 out of 4 listbox (any number of items) should be selected.

How can I do this?

Answer 1

Yours needs to be changed to use the AND condition and it will be the appropriate Sad Path approach:

if (document.getElementById("A").value == '' && 
    document.getElementById("B").value == '' && 
    document.getElementById("C").value == '' && 
    document.getElementById("D").value == '') {

    //then they didn't select AT LEAST ONE item
 }
 else {       
    //they did pick at least one
 }

Edit:

You can go with a Happy Path approach by doing the following:

 if (document.getElementById("A").value !='' || 
     document.getElementById("B").value !='' || 
     document.getElementById("C").value !='' || 
     document.getElementById("D").value !='') {

     //then they did select AT LEAST ONE item
  }
  else {       
     //they didn't pick at least one
  }