JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<div id="main">
    <form name="myForm" method="post">
        <div class="information">
            <label><span>First Name:</span>
                <input type="text" class="firstname" name="fname">
            </label>
            <br/>
            <label><span>Last Name:</span>
                <input type="text" class="lastname">
            </label>
            <br>
            <label><span>E-Mail:</span>
                <input type="text" class="email">
            </label>
            <br/>
            <label><span>Phone:</span>
                <input type="text" class="phone">
            </label>
            <br/>
            <input type="button" value="submit" class="submit">
        </div>
    </form>
    <br/>
    <br/>
    <div id="answer"></div>
</div>

CSS

#main {
    width:300px;
}
#main input {
    float:right;
    display:inline;
}
#main label {
    color: #2D2D2D;
    font-size: 15px;
    width:250px;
    display: block;
}
#main label span {
    position:relative;
    top:4px;
    font-family:sans-serif;
}
.submit {
    position:absolute;
}
input.invalid {
    border-color: #00A2FF;
}
input {
    border:1px solid rgb(200, 200, 200);
    border-radius:3px;
}

JavaScript

$(document).ready(function () {
    $('input:button').click(function () {
        var inputs = $( this ).closest( "form" ).find( "input[type=text]" );
        var valid = true;
        inputs.each(function() {
            var field = $( this );
            if ( !$.trim( field.val() ) ) {
                valid = false;
                field.addClass( "invalid" );
            }
            
            if ( !valid ) {
                $("#answer").html("Please fill out all fields.");
            }
        });
    });
});