Использование jquery validate errorPlacement для получения сообщения об ошибке в определенном div - PullRequest
Новая
       40

Использование jquery validate errorPlacement для получения сообщения об ошибке в определенном div

0 голосов
/ 07 мая 2018

Я пытаюсь использовать функцию jQuery Validate errorPlacement, чтобы разместить сообщение об ошибке, но я не могу понять это. Всякий раз, когда я нажимаю «Отправить», ввод сдвигается вниз, вместо размещения ошибки в newsletterValidate div.

Кто-нибудь видит, что я делаю неправильно в моем errorPlacement коде?

enter image description here

$('#newsletterForm').validate({
		//errorClass: 'invalid',
		errorPlacement: function(error, element) { 
			//element.val(error[0].outerText);
			//error.appendTo(element.next('div'));
			 error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));
		},
		rules: {
			email: {
				required: true,
				email: true
			}
		},
		messages: {
			email: {
				required: "Please enter your email address",
				email: "Please enter a valid email address"
			}
		},
		submitHandler: function(form) {
			event.preventDefault();
			var datastring = $('#newsletterForm').serialize();
			$.ajax({
				url: 'http://localhost:8080/php/newsletterSend.php',
				type: 'POST',
				data: datastring
				,
				success: function(data) {
					console.log(data);
					if (data == 'Error!') {
						alert('Unable to submit form!');
						alert(data);
					} else {
						$('#newsletterInput')[0].reset();
						$('#newsletterSuccess').show();
					}
				},
				error: function(xhr, textStatus, errorThrown) {
					alert(textStatus + '|' + errorThrown);
					console.log('error');
				}
			});
		}
	});
#newsletterInput {
	width: 70%;
	border: none;
	padding: 15px 10px;
	outline: none;
	font-size: 1.1rem;
	font-family: 'Nunito', sans-serif;
	display: inline-block;
  background: pink;
}
#newsletterSubmit {
	width: 25%;
	display: inline-block;
	border: none;
	font-size: 1.1rem;
	font-family: 'Nunito', sans-serif;
	padding: 15px 10px;
	cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<div>
  <form id="newsletterForm">
    <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
  </form>
</div>
<div id="newsletterValidate"></div>

1 Ответ

0 голосов
/ 12 мая 2018 
error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));

Я не уверен, почему вы используете jQuery для обхода внутри DOM, когда вы уже знаете уникальный id. Так что просто перейдите прямо к цели ... 

error.appendTo($('#newsletterValidate'));

Демонстрация 1: jsfiddle.net / b2enbs0s /

Однако теперь, когда это работает, вы можете видеть, что есть другая проблема. Сообщение повторяется .

Это потому, что вы пытаетесь разместить сообщение вне контейнера form ... 

<div>
    <form id="newsletterForm">
        <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </form>
</div>
<!--// outside of the form //-->
<div id="newsletterValidate"></div>

В этом случае плагин создает сообщение проверки, но не может найти его снова, чтобы правильно переключить его.

Исправление заключается в размещении элемента сообщения внутри контейнера form, где плагин может автоматически находить и переключаться после его создания. Следующая структура визуально визуализирует идентичность вашей исходной компоновке ... 

<form id="newsletterForm">
    <div>
         <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </div>
    <!--// inside of the form //-->
    <div id="newsletterValidate"></div>
</form>

Окончательная рабочая демонстрация: jsfiddle.net / b2enbs0s / 1 /

...