JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
    <legend><span class="number">1</span>Departing & Arriving</legend>
    <fielset class="col-sm-6">
        <label for="FDestination">From</label>
        <select name="Location" id="Location" class="googoo" onchange="checkforblank()">
            <option value="Please Select">Please Select</option>
            <option value="Newport">Newport</option>
            <option value="Mahdi">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>
    </fieldset>
    <button>Save</button>
</form>

CSS

.error {border: 1px red solid;}

JavaScript

function checkforblank() {
    
    var location = document.getElementsByClassName('googoo');
    var invalid = location.value == "Please Select";
 
    if (invalid) {
        alert('Please enter first name');
        location.className = 'error';
    }
    else {
        location.className = '';
    }
    
    return !invalid;
}