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 (e) {
        event.preventDefault();

        var errCount = 0;

        if($('#f_name').val() === '' && $('#l_name').val() === ''){
                name_err = " You need a first and a last name.";
        }else if($('#l_name').val() === '' && $('#f_name').val() !== ''){
                name_err = "You need a last name";
        }else if($('#l_name').val() !== '' && $('#f_name').val() === ''){
                name_err = "You need a first name";            
        }else{
                name_err = 'Looks Good';        
        }
        
        $('#name_err').html(name_err);
    });
});