JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<body>
    <div id="formContainer">
        <div class="formHeader">
             <h2>Get in touch</h2>

        </div>
        <form id="contactForm" action="" method="post">
            <p class="formLabel">Name<span class="error"> * Please enter your name</span>

            </p>
            <input id="name" class="required" type="text" name="Name" value="Name" />
            <p>Reason for Message</p>
            <select name="contactReason" value="Msg Type" size="1">
                <option value="Msg Type">Please Select</option>
                <option value="Work">Work Opportunity</option>
                <option value="Question">Question</option>
                <option value="Advice">Advice</option>
                <option value="Other">Other</option>
            </select>
            <p class="formLabel">Contact Email</p>
            <input id="email" class="required" type="email" name="email" value="Contact email" />
            <p class="formLabel">Message</p>
            <textarea id="msg" class="required" name="msg" maxlength="1000">Please enter your Message here - Maxlength 1000</textarea>
            <div class="formFooter">
                <div class="formFoot2Col">
                    <input id="submitForm" type="submit" value="submit" />
                </div>
                <div class="formFoot2Col">
                    <input id="resetForm" type="reset" value="Clear" />
                </div>
            </div>
        </form>
    </div>
</body>

CSS

/* Contact Form */
 #formContainer {
    height:700px;
    width:480px;
    margin:0 auto;
    background-color:white;
}
.formHeader {
    height:100%;
    max-height:47px;
    width:100%;
    max-width:480px;
    background-color: #d5d5d5;
    padding:10px;
    margin:0;
}
#formContainer h2 {
    padding:0;
    margin:0;
}
form.formContact {
    width:100%;
    max-width:400px;
    height:auto;
    padding:10px;
    margin:0 auto;
    background-color: #efefef;
}
form p {
    text-align:left;
    margin:10px;
    padding-left:30px;
}
.error {
    display: none;
    margin-left: 10px;
}
input.invalid, textarea.invalid {
    border: 2px solid red;
}
input.valid, textarea.valid {
    border: 2px solid green;
}
/*span {
    opacity : 0;
    filter : alpha(opacity=0);
}
span.formHelp, span.formError, span.formComp {
    font-size:0.75em;
    font-style:italic;
    padding-left:10px;
}
span.formHelp {
    color:blue;
}
span.formError {
    color:red;
}
span.formComp {
    color:green;
}*/
 label.formLabel {
    display:block;
    height:25px;
    width:100%;
    max-width:400px;
    padding-top:10px;
    font-size:1em;
    margin:0 auto;
}
label.formLabel, input, textarea, select {
    letter-spacing:2px;
}
select {
}
input, textarea {
    width:100%;
    max-width:398px;
    padding:0;
    margin:0 auto;
    text-indent:5px;
    border:1px solid #d5d5d5;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
textarea {
    resize:none;
    height:324px;
}
input {
    height:27px;
}
.required {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.3);
    /* background-color:#FCC0B8; 
       opacity : 0.2;
       filter : alpha(opacity=20); */
}
.voluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.3);
}
.complete {
    background:rgb(0, 140, 0);
    background:rgba(0, 140, 0, 0.3);
    /* background-color:#008c00; */
}
.cursorFocusRequired {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86,...

JavaScript

$('input, textarea').on('click', function () {
    $(this).select();
    $('#name, #msg').on('input', function () {
        var input = $(this);
        var is_name = input.val();
        console.log(is_name);
        var initial_val = input.attr('value');
        console.log(initial_val);
        if (is_name === "") {
            input.removeClass("required voluntary valid").addClass("invalid");
        } else {
            input.removeClass("required voluntary invalid").addClass("valid");
        }
        if ((input).hasClass('invalid')){
            $(input).parent('span').removeClass('error');
        } else {
            
        }
    });
    $('#email').on('input', function () {
        var input = $(this);
        var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var is_email = re.test(input.val());
        if (is_email) {
            input.removeClass("required invalid").addClass("valid");
        } else {
            input.removeClass("required valid").addClass("invalid");
        }
    });
        
});