JSFiddle - React, Tailwind, and code Playground

HTML

<form action="ilmoittaudu.php" method="post" id="ilmoittuminen" class="form-horizontal">

    <div class="control-group" id="sukupuoli">
        <label class="control-label">Sukupuoli</label>
        <div class="controls">
            <select name="sukupuoli">
            <option value="Valitse">Valitse</option>
            <option value="Naaras">Naaras</option>
            <option value="Uros">Uros</option>
            </select>
        </div>
    </div>
    
<button type="submit" class="btn">Lähetä</button>
</form>

CSS

.error{background:red;}

JavaScript

$('#ilmoittuminen').submit(function() {

    var Sukupuoli = $('select[name="sukupuoli"]').val();
    
    console.log(Sukupuoli);

    if (Sukupuoli == "Valitse") {
        $('.control-group#sukupuoli').addClass("error");
        $('select[name=sukupuoli]').focus();
        return false;
    }

    var ilmoittautumisdata = $('#ilmoittuminen').serialize();
    $.ajax({
        url: "",
        data: ilmoittautumisdata,
        type: "POST"
    }).done(function() {

    }).error(function() {
        $('.control-group').addClass("alert");
    });

    return false;
});