JSFiddle - React, Tailwind, and code Playground

HTML

<form id="startform" class="starter-form" method="POST" action="">
    <div class="heading">
         <h1>Signup</h1>

    </div>
    <div id="form1" class="wizard">
        <input name="first_name" maxlength="30" placeholder="First Name" type="text"
        class="input-text signup required" id="id_first_name" />
        <input name="last_name" maxlength="30" placeholder="Last Name" type="text"
            class="input-text signup required" id="id_last_name" />
        <input id="id_firmbox" class="input-text firm-autocomplete" name="firmbox"
        value="" placeholder="Company" type="text" />
        <input id="id_job_title" type="text" placeholder="Position" class="input-text"
            name="job_title" />
        <button data-next-id="form2" validationDiv="form1" type="submit" class="continue button button-action form-button">Done</button>
        <p id="error">.html()</p>
    </div>
</form>

CSS

p#error {
    text-align: center;
    color: #650B0C;
    padding: 5px;
    background: #C02126;
    background: -moz-linear-gradient(top, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(192, 33, 38, 1)), color-stop(100%, rgba(161, 24, 29, 1)));
    background: -webkit-linear-gradient(top, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
    background: -o-linear-gradient(top, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
    background: -ms-linear-gradient(top, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
    background: linear-gradient(to bottom, rgba(192, 33, 38, 1) 0%, rgba(161, 24, 29, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c02126', endColorstr='#a1181d', GradientType=0);
    border-radius: 5px;
    border: 1px solid #720405;
    border-top: 1px solid #CF4046;
    font-weight: bold;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.22);
    display: none;
}
.tobefixed {
    background-color: #BA4445;
    color: white;
    border: 2px solid #A1181D;
}

JavaScript

required = ["id_first_name", "id_last_name", "id_firmbox", "id_job_title"];

errornotice = $("#error");
emptyerror = "Please fill out this field.";

$("#startform").submit(function () {
    var errorText = '';
    
    //Validate required fields
    for (i = 0; i < required.length; i++) {
        var input = $('#' + required[i]);
        
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("tobefixed");
            errornotice.fadeIn(750);

            if (input.attr('placeholder').indexOf($('#error')) >= 0) {
                // do nothing
            } else {
                errorText = errorText + $(input).attr('placeholder').toLowerCase() + ', ';
            }

            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("tobefixed");
        }
    }
    
    $('#error').html('').append('Please fill in your ' + errorText);

    if ($(":input").hasClass("tobefixed")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});
$(":input").focus(function () {
    if ($(this).hasClass("tobefixed")) {
        $(this).val("");
        $(this).removeClass("tobefixed");
    }
});