JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<form action="#" method="post" id="test">
    <div>
        <label for="scelta">Scelta:</label>
        <select id="scelta" name="scelta">
            <option value="" disabled="disabled">Scegli</option>
            <option value="arte">Arte</option>
            <option value="scienza">Scienza</option>
            <option value="web">Web</option>
        </select>
    </div>
    <p><input type="submit" value="Invia" id="submit" name="submit" /></p>
</form>

CSS

.error {color: red;}
.success {color: green;}

JavaScript

var Validator = function(form) {
    
    var that = {
        element: form,
        
        validate: function() {
         
            this.element.submit(function(event) {
                
                $('span.error, span.success', $(this)).remove();
               
                var select = $('#scelta', $(this));
                var option = $('option:selected', select);
               
                if(!option[0].value) {
                    
                    $('<span class="error"/>').text('Devi scegliere un argomento').
                     appendTo(that.element.find('div'));
                } else {
                   
                  $('<span class="success"/>').text('Hai scelto').
                     appendTo(that.element.find('div')); 
                   
                } 
                    
               
                event.preventDefault();
               
            }); 
           
        }
    };
   
    return that; 
    
    
};

$(function() {
   
    var validator = new Validator($('#test'));
    validator.validate();
    
    
});