Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.03.2019, 13:16
Интересующийся
Отправить личное сообщение для Volun Посмотреть профиль Найти все сообщения от Volun
 
Регистрация: 24.03.2019
Сообщений: 21

Валидация и отправка формы
Прошу вашей помощи господа. Есть небольшая форма, которую надо сперва валидировать, и потом отправить. Есть два кода, первый отвечает за валидацию, а второй за отправку. Разнес их в два разных файла, но почему-то у меня форма отправляется без валидации. Или как их объединить и выполнить по условию? 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');
    	}
 	});
}

Последний раз редактировалось Volun, 27.03.2019 в 13:33.
Ответить с цитированием
  #2 (permalink)  
Старый 27.03.2019, 13:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

<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>

Последний раз редактировалось Malleys, 27.03.2019 в 14:01.
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2019, 14:11
Интересующийся
Отправить личное сообщение для Volun Посмотреть профиль Найти все сообщения от Volun
 
Регистрация: 24.03.2019
Сообщений: 21

Да, но в этом случае страница перезагружается, а мне нужно без перезагрузки, потому что по клику эта форма скрывается и появляется другая.
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2019, 14:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

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

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

Последний раз редактировалось Malleys, 27.03.2019 в 14:36.
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2019, 16:17
Интересующийся
Отправить личное сообщение для Volun Посмотреть профиль Найти все сообщения от Volun
 
Регистрация: 24.03.2019
Сообщений: 21

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');
			}
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2019, 16:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,790

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

$('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
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация веб формы giovanni Events/DOM/Window 3 01.09.2017 15:49
Отправка формы после ajax проверки ShutTap Общие вопросы Javascript 15 08.04.2016 11:46
Отправка данных формы. Как выглядит структура метода с AJAX (по JQuery)? Coriolan161 AJAX и COMET 5 24.11.2015 20:17
Отправка данных формы AJAX`ом? Jopses jQuery 4 20.02.2013 12:34
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12