Как заставить курсор сфокусироваться на следующем пустом поле

Question

Если поле «Имя» было оставлено пустым, то после появления ошибки курсор должен автоматически переместиться в поле «Имя».

Если поле «Фамилия» было оставлено пустым, курсор должен переместитьсяавтоматически к полю фамилии после появления ошибки.

Курсор остается только в первом текстовом поле

var first_name = $("#first_name").val();
$("#first_name").focus();

var last_name = $("#last_name").val();
$("#last_name").focus();

if (first_name == "") {
  $(first_error).text("You must Enter a First Name") return;
}
if (last_name == "") {
  $(last_error).text("You must Enter a Last Name") return;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
<span class="error" id="first_error"></span>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
<span class="error" id="last_error"></span>

Answer 1

Если поля внутри родительского элемента div или формы являются пустыми, они просто фокусируются на этом поле. Используйте эту функцию

function fieldsValidations(element) {
    var fields = $("#"+element).find("select, textarea, input");

    $.each(fields, function(i, field) {
        if (!field.value){
            $(field).focus();
            return false;
        }
    });
}

, а аргумент element функции - родительский элемент div или формы. ID