JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>Some text in here</textarea> <br />
<textarea>Some different text in here</textarea> <br />
<select><option value="0"></option><option value="1">1</option><option value="2">2</option></select> <br />
<input class="clear" type="button" value="Clear textareas">
<input class="validate" type="button" value="Validate textareas">

CSS

textarea { height: 15px; padding: 3px; resize: none; }

.errorField { border: 2px solid red; }
.successField { border: 2px solid green; }

JavaScript

function validateTheForm () {
    $(':text, select, textarea').each(function() {  
        if ($(this).val().trim().length == 0) {  
            $(this).addClass('errorField'); 
                return false; 
        } else {
            $(this).removeClass('errorField').addClass('successField');
            return true;
        }    
    });
};

$(':button.clear').click(function() {
    $('textarea').each(function() {  
        $(this).val('');
    });
});

$(':button.validate').click(function() {
    if (validateTheForm()) { 
        // the fields will have a green border around them
    }
});