JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

<fieldset id="form-1">
    <label>First Name:</label><br/>
    <input type="text" class="required" /><br/>
    <label>Email Address:</label><br/>
    <input type="text" class="required" /><br/>
    <label>Phone Number:</label><br/>
    <input type="text" class="required" /><br/>
    <label>Your state:</label><br/>
    <select class="required">
        <option>-- Select your state --</option>
        <option>Indiana</option>
        <option>California</option>
        <option>New York</option>
    </select>
    <br/>    <br/>
    <input id="submit-form" type="submit" value="Submit" />
</fieldset>

CSS

input, select
{
    padding:5px;
    margin-bottom:5px;
}
.validate-error
{
    border:solid 2px #D04B66;
}

JavaScript

$("#submit-form").click(function() {
    if (validateRequired("#form-1")) alert("You're good bro!");
    else alert("Please provide the required fields!");
});

function validateRequired(element) {
    var success = true;
    $(element).find('.required').each(function() {
        if ($(this).val() == '') {
            $(this).addClass('validate-error');
            success = false;
        }

        $(this).bind("keyup", function() {
            if ($(this).val() != '') $(this).removeClass('validate-error');
            else $(this).addClass('validate-error');
        });
    });
    if (success == false) {

    }
    return success;
}