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.push('a first name');
        if($('#l_name').val() === '') name_err.push('a last name');
     // if($('#hobby').val() === '') name_err.push('a hobby'); 
        err_count+=name_err.length;
        $('#name_err').html( name_err.length 
                           ? 'You need ' + name_err.join(' and ')
                           : ''  
                           );
    });
});