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) {
        var err_count = 0,
             name_err = '';
        event.preventDefault();
        if ($('#f_name').val() === '') { 
            name_err = 'a first name';
            err_count++;
         }
         if ($('#l_name').val() === '') {
             name_err += (name_err ? ' and ' : '')
                       + 'a last name';
            err_count++;
        }
     // example of simply adding a check (for a hobby)
     // if ($('#hobby').val() === '') {
     //     name_err += (name_err ? ' and ' : '')
     //               + 'a hobby';
     //     err_count++;
     // } 
        $('#name_err').html( name_err
                           ? 'You need ' + name_err 
                           : ''
                           );
    });
});