JSFiddle - React, Tailwind, and code Playground

HTML

<form id="addNew">
<select id="prefix">
    <option>Mr</option>
    <option>Mrs</option>
    <option>Miss</option>
    <option>Ms</option>
</select>&nbsp;
<input type="text" id="f_name" name="f_name" placeholder="First Name" />&nbsp;
<input type="text" id="l_name" name="l_name" placeholder="Family Name" />
    <input type="submit"></input>
</form> 
<br />
<div class="form_err" id="name_err"></div>

JavaScript

$(document).ready(function (e) {
    $('#addNew').submit(function (event) {
        event.preventDefault();
        var err_count = 0;
        var name_err = '';
        var name_err_count = 0;
        if ($('#f_name').val() === '') { 
            name_err = "You need a first name";
            err_count++;
            name_err_count++;
        }
        if ($('#l_name').val() === '') {
            if (name_err_count > 0) {
                name_err += " and a last name.";
            } else {
                name_err += "You need a last name";
            }
            err_count++;
            name_err_count++;
        } 
        $('#name_err').html(name_err);
    });
});