Multiple select validation

Question

Hello all,

I have a form in HTML, that has several select elements, what is the best way to make validation for them in such way that no two select elements can have same value, validation function should fire on select, so it can check are there any selects with the same option value if yes then alert something, can I get a explanation how to write this in javascript?

Thank you

here is a bit of HTML code I want to validate :

    <form name="forma" action="" method="POST">

    <select name="sel1">
  <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel2">
   <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel3">
    <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    </form>

Here is the solution slightly adjusted but this is it:

var selectTest = function () {
    var i, j;
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
     if(sels[i].value != "Please select")
         {
            if (sels[i].value === sels[j].value) {
                alert("Selected values must be different");
                return;
            }
      }
        }
    }

};

Special tnx to austin cheney, thanks to everyone who posted and participated.

Answer 1

I would generally recommend using jQuery for this as it simplifies it quite a bit. You'd want to do something along these lines.

    function hasDuplicates() {
        var dupe = false;
        $("select option:selected").each(function(i) {

            var id = $(this).parent().attr("id");
            var value = $(this).attr("value");

            $("select option:selected").each(function(c) {
                if ($(this).parent().attr("id") != id && $(this).attr("value") == value) {
                    alert("Duplicate");
                    dupe = true;
                    return false;
                }
            });

            if (dupe) {
                return false;
            }
        });

        return dupe;
    }

This will cycle through all the select boxes on the page and compare each one to every other one. If there's a duplicate value it will popup an alert and return true.

For it to fire when a change to a select box is made you'd want to add onchange events to each as shown below. Each select will need a unique id to be set, although you could change the calls to attr("id") to attr("name") if you don't want to add ID's.

<select onchange="hasDuplicates()">...

Performance wise it may make sense to store the values in an array, as this solution hits the DOM quite a lot by having a nested loop.

Answer 2

First, don't use the name attribute as a reference point for script. Name refers to an array of named elements in the DOM, which is typically useless in the global DOM outside of form controls. When using the name array it is difficult to tell child nodes apart from child nodes of a same named element. Use the id attribute for use with script, which is a unique identifier instead.

var selTest = function () {
    var i, j, error = document.getElementById("error"),
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), sel3 = document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
            if (sels[i].value === sels[j].value) {
                error.display = "block";
                sels[i].backgroundColor = "#f00";
                sels[j].backgroundColor = "#f00";
                return false;
            }
        }
    }
};

EDIT: changed return; to return false; for use with an onsubmit event.

Simply add the id attribute value of the select lists to the "sels" array in the code above. The above code will make a hidden element with an id of "error" appear if the test results in a true condition. It will also change the background color of the offended select lists to red.

Answer 3

Give onchange="validate('1')" onchange="validate('2')" onchange="validate('3')" for each selecte statement.

function validate(x){ if(x==1) { var selectedvalue=document.forma.sel1.options[document.forma.sel1.selectedIndex].value if(selectedvalue==document.forma.sel2.options[document.forma.sel2.selectedIndex].value || selectedvalue==document.forma.sel3.options[document.forma.sel3.selectedIndex].value) alert("No two values cannot be same"); } esle if(x==2) { var selectedvalue=document.forma.sel2.options[document.forma.sel2.selectedIndex].value if(selectedvalue==document.forma.sel1.options[document.forma.sel1.selectedIndex].value || selectedvalue==document.forma.sel3.options[document.forma.sel3.selectedIndex].value) alert("No two values cannot be same"); } else if(x==3) { var selectedvalue=document.forma.sel3.options[document.forma.sel3.selectedIndex].value if(selectedvalue==document.forma.sel1.options[document.forma.sel1.selectedIndex].value || selectedvalue==document.forma.sel1.options[document.forma.sel1.selectedIndex].value) alert("No two values cannot be same");

} }