How to color border when error is displayed?

Question

1Departing & Arriving

            <fielset class="col-sm-6">
                <label for="FDestination" >From</label>
                <select name="Location" id = "Location" onchange="checkforblank()"  >
                     <option value = "Please Select" >Please Select </option>
                    <option value="Newport">Newport</option>
                    <option value="Mahdi">London</option>
                    <option value="Cardiff">Cardiff</option>
                    <option value="Cilo">Brazil </option>
                </select>



            <fielset class="col-sm-6">
                <label for="FDestination">To</label>
                <select name="LocationTo" id = "LocationTo" onchange="checkforblank()">
                    <option value = "Please Select">Please Select </option>
                    <option value="Cardiff">Cardiff</option>
                    <option value="Mahdi">London</option>
                    <option value="Newport">Newport</option>
                    <option value="Cilo">Brazil</option>
                </select>

<script>

  function checkforblank() {

    var location = document.getElementById('Location');
    var invalidFrom = location.value == "Please Select";
    var locationTo = document.getElementById('LocationTo');
    var InvalidTo = locationTo.value == "Please Select";

    if (invalidFrom || InvalidTo) {
        alert('Please enter first name');
        location.className = 'error';
        InvalidTo.className = 'error'; 
    }
    else {
        location.className = '';
    }

    return !invalid;
}


</script>


.error {
    border: solid 5px #FF0
}

I want borders for the selected option to be coloured when user chooses wrong option ("Please Choose") in either box. What happens now is that when I click submit it displays alert then for a few seconds the colour comes up in one box and the other box is blank, then it just disappears.

When user chooses the "Please Choose " option in either box I want the error to be displayed in that box e.g. if both boxes have "Please Choose" then both highlighted or if one box has "Please Choose" and the other box is valid then only the one box with wrong option is highlighted. Also that when OK is clicked in the alert box the boxes remain highlighted until changed to a valid option.

Answer 1

First thing I would do is fix the fielset to be fieldset as it should be.

Second, I would add the closing tags for them, like so;

<fieldset class="col-sm-6">
    <label for="Location">From</label>
    <select name="Location" id="Location" onchange="checkforblank()">
        <option value="Please Select">Please Select</option>
        <option value="Newport">Newport</option>
        <option value="Mahdi">London</option>
        <option value="Cardiff">Cardiff</option>
        <option value="Cilo">Brazil</option>
    </select>
</fieldset>
<fieldset class="col-sm-6">
    <label for="LocationTo">To</label>
    <select name="LocationTo" id="LocationTo" onchange="checkforblank()">
        <option value="Please Select">Please Select</option>
        <option value="Cardiff">Cardiff</option>
        <option value="Mahdi">London</option>
        <option value="Newport">Newport</option>
        <option value="Cilo">Brazil</option>
    </select>
</fieldset>

After that, you didn't specify whether using jQuery was an option, so this answer is dependent on that answer, since it uses jQuery.

$('#Location, #LocationTo').change(function(e) {
    var fromVal   = $('#Location').val(),
        toVal     = $('#LocationTo').val(),
        borderCol = '';

    if (fromVal == "Please Select" || toVal == "Please Select") {
        borderCol = 'red';
    } else {
        borderCol = 'black';
    }

    $('select[id="Location"],select[id="LocationTo"]').parent().css({
        'border-color' : borderCol
    });
});

Link to the fiddle

http://jsfiddle.net/MrMarlow/eg8k4vL7/

If using jQuery is an option, include it like so

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Edit :: Fixed label to attributes to point to the corresponding id.