JSFiddle - React, Tailwind, and code Playground

HTML

<div class="error"></div>
<form id="contact_form" method="post" action="">
    <input type="text" name="first_name" id="first_name" placeholder="First Name"/>
    <br/>
    <input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
    <br/>
    <input type="text" name="email" id="email" placeholder="Email"/>
    <br/>
    <input type="text" name="zip_code" id="zip_code" placeholder="Zip Code"/>
    <br/>
    <textarea name="message" id="message" placeholder="Message"></textarea>
    <br/>
    <input type="submit" value="submit" />
</form>

CSS

.error{
    background:#FF0000;
    color:#ffffff;
    font-size:12px;
    padding:5px;
    display:none;
}

JavaScript

$(document).ready(function(){ 
$('#contact_form').submit(function(){
    error = '';
    
    if ($('#first_name').val() == '') {
        error += 'You must enter your first name!<br/>';
    }
    
    if ($('#last_name').val() == '') {
        error += 'You must enter your last name!<br/>';
    }
    
    if ($('#email').val() == '') {
        error += 'You must enter your email<br/>';
    }
    else
    {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
                
                if(!pattern.test($('#email').val()))
                {
                    error += "Invalid email address<br/>";
                }
    }
    
    if ($('#zip_code').val() == '') {
        error += 'You must enter your zip code<br/>';
    } 
    else
    {
        if (!isNumber($('#zip_code').val()))
            {
                error += 'Invalid zip code<br/>';
            }
    }
    if ($('#message').val() == '') {
        error += 'You need to tell us something! Please enter your message!';
    }
    
    if(error != '')
    {
        $('.error').html(error);
        $('.error').fadeIn();
        return false;
    }
    else
    {
        return true;
    }
});
});

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}