JSFiddle - React, Tailwind, and code Playground

HTML

<div><label>Your Name:</label><input type="text" class="textinput" ID="name"></div>
<div><label>Email Address:</label><input type="text" class="textinput" ID="email"></div>
<div><label>Email Address:</label><input type="text" class="textinput" ID="emailConfirm"></div>
<div><input type="submit" ID="submit" value="Reserve Now"></div>

CSS

input.error { background:#ba4814; color:#fff;}

JavaScript

$(document).ready(function() {

    $("#submit").click(function(e) {

        var name = $("#name");
        var email = $("#email");
        var emailConfirm = $("#emailConfirm");
        var emailaddressVal = $("#email").val();
        var emailConfirmVal = $("#emailConfirm").val();
        var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;


        if (name.val() == "") {
            name.addClass("error").focus();
            return false;
        } else {
            name.removeClass("error");
        }

        if (!emailReg.test(email.val())) {
            email.addClass("error").focus();           
        } else {
            
            email.removeClass("error");
        }
        if ( emailaddressVal != emailConfirmVal) {
            email.addClass("error").focus();
            emailConfirm.addClass("error").focus();
        } else {
            email.removeClass("error");
            emailConfirm.removeClass("error");
        }



        e.preventDefault();
    });

});