Валидация и отправка формы

[Volun]

Прошу вашей помощи господа. Есть небольшая форма, которую надо сперва валидировать, и потом отправить. Есть два кода, первый отвечает за валидацию, а второй за отправку. Разнес их в два разных файла, но почему-то у меня форма отправляется без валидации. Или как их объединить и выполнить по условию? ID формы = "form_name", ID поля = "first_name", ID кнопки = "btn_name"

Код валидации:

$(document).ready(function() {
  $('#form_name').submit(function(e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
 
    $(".error").remove();
 
    if (first_name.length< 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
    }
  });
});

Код отправки:

$( document ).ready(function() {

    $("#btn_name").click(
		function(){

			sendAjaxForm('form_name','form_pass','save_user.php');
			return false; 
		}
	);
});

function sendAjaxForm(form_name, form_pass, url) {
    $.ajax({
        url:     url,
        type:     "POST", 
        dataType: "html",
        data: $("#"+form_name).serialize(), 
        success: function(response) { 
        	result = $.parseJSON(response);
    	},
    	error: function(response) { 
            $('#error_message').html('Error message');
    	}
 	});
}

[Malleys]

Так форма должна отправляться, если удалась валидация!

<form id="form_name" action="save_user.php">
	<input id="first_name" name="first_name" required>
	<input type="submit" id="btn_name">
	<output id="message"></output>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

	$(function () {
		$('#form_name').submit(function(e) {
			e.preventDefault();
			var first_name = $('#first_name').val();

			$(".error").remove();

			if (first_name.length < 1) {
				$('#first_name').after('<span class="error">This field is required</span>');
			} else {
				sendForm('form_name', 'form_pass');
			}
		});
	});

	function sendForm(form_name, form_pass) {
		var form = $("#" + form_name);
		$.ajax({
			url: form.attr("action"),
			type: "POST",
			dataType: "html",
			data: form.serialize(),
			success: function (response) {
				$('#message').html('OK');
				var result = $.parseJSON(response);
			},
			error: function (response) {
				$('#message').html('Error message');
			}
		});
	}

</script>

[Volun]

Да, но в этом случае страница перезагружается, а мне нужно без перезагрузки, потому что по клику эта форма скрывается и появляется другая.

[Malleys]

а, но в этом случае страница перезагружается, а мне нужно без перезагрузки

Посмотрите ещё раз пример из поста №2, там всё-таки ничего не перезагружается.

UPD Возможно вы скопировали к себе только часть скрипта и не заметили, что функция называется sendForm, а не sendAjaxForm, и правда, там нет никакого Ajax! Вам стоит избегать использовать названия, вводящие в заблуждение. Например, sendForm или putFormDataToServer понятно, а sendAjax или ajaxRequestAjax означает, что вы не понимаете, что делаете! Что за Ajax? Где вы там увидели Ajax? Это называется make request, fetch data или хотя бы connect to server

Если вы где-то увидели ajax/using ajax, то это можно зачеркнуть и смысл не поменяется.

[Volun]

Malleys, да вы правы. Но если я добавляю проверку второго поля, то после заполнения первого поля и клика ничего не происходит...

var first_name = $('#first_name').val();
var last_name = $('#last_name').val();

$(".error").remove();
if (first_name.length < 1) {
  $('#first_name').after('<span class="error">This field is required.</span>');
} 
if (last_name.length < 1) {
 $('#last_name').after('<span class="error">This field is required</span>');
} else {
				sendForm('form_name', 'form_pass');
			}

[Nexus]

Я бы на вашем месте не писал валидатор для конкретной формы, а сделал один, но для всех.

$('form').submit(function(e) {
    e.preventDefault();

    const $form = $(this);

    $form.find('.invalid').removeClass('invalid');

    const $invalidFields = $form.find('[required]').filter(function() {
        //сейчас проверяются только текстовые поля
        return !this.value.trim().length;
    }).addClass('invalid');

    if ($invalidFields.length)
        return void alert('Fill all required fields');

    //make requiest
});