JavaScript validation using a for loop to check two or more form values are not the same

Question

I'm new to JavaScript and have had some success in basic validation but i cannot work out how to do this.

What i have is form which can have between 1 and 10 drop down boxes depending on the users selection. the values in these boxes a retrieved from my database. What I am trying to do is maake sure the user has not selected the same values more than once before i put this data back into my database.

The code below is what I have come up with so far. When the JavaScript function is run it returns to the same page but the alert appears on the site, but not in a popup box as it previously has when i have used it on other pages. It does see that the values have been selected more than once, but i have done something wrong as I get an undifined index error for php variables which previously had data in them.

<script type="text/javascript">
    <!--
    var nov = "document.getElementById("
    NOV
    ").value == ''";
    var checknov = new Array();
    checknov[] == 0;
    function validate_reg() {
        while (nov > 0) {
            for (var veh = checknov) {
                if (document.getElementById("FLT").value == '' == veh) {
                    window.alert("You Cannot Assign The Same Vehicle More Than Once");
                }
                else {
                    checknov[] = document.getElementById("FLT").value == '';
                }
            }
            nov--;
        }
    }

    -->
</script>

I have added the Varible nov to the id as this is how it is defined in the form.

    <script type="text/javascript">
<!--
var nov = document.getElementById("NOV").value == '';   
var checknov=new Array();
checknov[]==0;
    function validate_reg()
     {
                while (nov>0)
                    {
                        for (var veh=checknov)
                            {
                                if (document.getElementById("FLT"nov).value == '' == veh)
                                    {
                                        window.alert("You Cannot Assign The Same Vehicle More Than Once");
                                    }
                                else
                                    {
                                        checknov[] = document.getElementById("FLT"nov).value == '';
                                    }
                            }
                        nov--;
                    }
     }

  -->
  </script>

Answer 1

This code is awful... First things first, you should NOT be validating on the client side! That's very easy to get around, and as you can already see, if the validation doesn't work, the server side struggles. All validation should be done server side. Or both, if you prefer (makes it possible to alert users before they waste time waiting on server requests).

Anyway, you have countless flaws in your code. Let's go over them first. I'm referring to the second code example. First of all, you assign a string to nov, when it appears you clearly intended to use a function. Then you performed a boolean check on checknov. Never mind that it's a syntax error which should be apparent from the browser's warnings, but it wouldn't do anything even if it worked!

Then you have a function that checks if nov is greater than zero... but nov is a string. That kind of comparison makes no sense! And then you try and perform a for loop on conditions that are completely invalid. For loops have three parts: the initialization, the looping condition, and the post-loop operation. You may have intended a while loop, but even then your condition is invalid, as you're assigning a value instead of checking for equivalence. I'm not even sure what you intended from the rest of your code.

I'll be honest, you've demonstrated you know almost nothing about JavaScript. I'd recommend putting this down and learning JS first.

But anyway, a more correct method of validation would be to use something like document.getElementsByClassName(), which would return an array of the DOM objects in a class (and give all your form elements that class). As a result, you'd get the elements of your form select boxes (what you call drop down boxes). You could then loop through this (recall that .length can be used to find the size of the array) with a for loop. Although you're also going to need to understand how a for loop works, and your code demonstrates you do not.

Inside that loop, you'd have to loop through all the elements again, since you'd have to compare each element to all the other elements. A bit inefficient and oversimplified, but suitable enough in this case.

EDIT: I should also point out that you can get the value of a select element with <DOM element>.options[<DOM element>.selectedIndex].value.

Finally, again, I stress, do not do just client side validation.

EDIT2: Also, don't use HTML comments inside script tags.