JSFiddle - React, Tailwind, and code Playground

by ChristianNikkanen

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>
        </div>
    </div>
</form>

CSS

.error{background:red;}

JavaScript

$('#ilmoittuminen').submit(function(){
        
        var Sukupuoli = $('input[name=sukupuoli]').val()
        
            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;
    });