Changing border-color of HTML input element to red if an error occurs

On November 7th a question was posted on SO where the OP wanted to change the border color of the input elements to red when both inputs didn’t match a condition.

I combined the JavaScript and a little bit of JQuery to solve this.

Here is the code:

var index_one;
var index_two;

    $('#Location, #LocationTo').change(function (e) {

        index_one = $("#Location")[0].selectedIndex;
        index_two = $("#LocationTo")[0].selectedIndex;
    });
    $("#submit").click(function () {
        if ($("#Location>option").eq(index_one).text() == $("#LocationTo>option").eq(index_two).text()) {
            $('#Location, #LocationTo').css("border-color", "red");
        } else {
            $('#Location, #LocationTo').css("border-color", "black");
        }
    });

As you can see, I first fetched the indexes of the selected items and after that gave the index to the eq(index) JQuery function in order to get the element as an object and then get the text via the .text() function. If the same options were selected in both input tags then the red border color would be displayed, otherwise the black default color remains.

If you want to handle all the possible cases then add the following code:

else if($("#Location>option").eq(index_one).text() =="Please Select")
    {
        alert ("Select an option");
    }
      else if($("#LocationTo>option").eq(index_one).text() =="Please Select")
    {
        alert ("Select an option");
    }

Here is the fiddle to see the code in action: http://jsfiddle.net/eugensunic/eg8k4vL7/1/