Как вывести ошибку в конкретном input?

Question

[Николай Романов]

Люди добрые, это мой первый опыт c js.
Решил сделать форму сам. Вроде все работает, но ошибки выводит общие для всех полей.
Если не заполнено поле ошибка появляется, но и появляется там где заполнено поле.

Надо как то разделить

$.each(request.data, function (key, val) {
                $(".form-required-hide")  .addClass("form-required"); // Вывожу сообщение
                $(".art_form")  .addClass("required"); // Обвожу рамку
                $('input[type="submit"]').attr('disabled', true); // Блокируем кнопку
                 return false;
                });

<form name="contact_form" class="forma" >
	    <div class="form-line">
		<input type="text" maxlength="100" name="art_name" id="art_name" class="art_form" placeholder="Ваше имя" value=""/>
		<span class="form-required-hide">Обязательно для заполнения</span>
		</div>
		<div class="form-line">
        <input type="tel"  maxlength="20"  name="art_tel" id="art_tel" class="art_form"   placeholder="Номер телефона" value="" />
        <span class="form-required-hide">Обязательно для заполнения</span>
		</div>
</form>

Comments

[Вадим]

Что у вас в reques.data? Какие ключи в key?
Выглядит так, что Вам нужно проверять значение (val), если оно пустое, то смотреть на ключ (key), находить соответствующий этому ключу инпут и добавлять класс на следующий за ним в разметке .form-required-hide, а не на все .form-required-hide, как Вы делаете на второй строке в js.

[Николай Романов]

Вадим, Было вот так

$.each(request.data, function (key, val) {
                    $('.art_' + key).addClass('error');
                    $('.art_' + key).before('<span class="error-' + key + '">' + val + '</span>');
                });
                $('#submit-feedback').val('Что-то пошло не так...');

Я не понимаю как работает key, val

Я так понял это идет из рhp массива

function ajax_action_callback() {

	// Массив ошибок
	$err_message = array();
// Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_name'] ) || ! isset( $_POST['art_name'] ) ) {
		$err_message['name'] = 'Пожалуйста, введите ваше имя.';
	} else {
		$art_name = sanitize_text_field( $_POST['art_name'] );
	}
	
	if ( empty( $_POST['art_tel'] ) || ! isset( $_POST['art_tel'] ) ) {
		$err_message['tel'] = 'Пожалуйста, введите телефон.';
	} else {
		$art_tel =  $_POST['art_tel'];
	}
	// Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо
	if ( $err_message ) {

		wp_send_json_error( $err_message );

[Вадим]

Николай Романов,

Было вот так

И это не подходило потому что...?

Я не понимаю как работает key, val

Мне кажется для этой задачи Вам особо и не нужно понимать. Нужно знать что туда приходит.
key и value это аргументы функкции.
Полагаю, что в key - название поля, в value - его значение.

Далее разберём строку $('.art_' + key).addClass('error');
• '.art_' + key - селектор html элемента по классу(так как точка в начале), состоящих из 2х частей. 1) Статическая art и 2) динамическая key. Таким образом, скажем, если key = 'form', то селектор примет вид .art_form - то есть все элементы с классом art_form.
• $('.art_' + key) - jQuery функция, которая находит все элементы по заданному селектору.
• .addClass - добавляем всем найденным элементам указанный класс.
•

$('.art_' + key).before('<span class="error-' + key + '">' + val + '</span>');

- добавляет перед найденным элементом спан с классом 'error'+key с текстовым содержимым val.

[Николай Романов]

Вадим, Огромное спасибо, я только php начал понимать, а тут еще js. Надо больше учиться.

[Николай Романов]

Вадим,

И это не подходило потому что...?

Потому что оно не работало, а я нашел другое решение которое работало. Ладно уже кое что вычитал и ты подсказал спасибо.

[Вадим]

Николай Романов, https://learn.javascript.ru/debugging-chrome
Поможет разобраться почему не работает или понять как работает тот или иной скрипт.