Как сделать отдельную проверку на каждый checkbox?

Question

[Сергей Мурин]

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

$(".form_submit").click(function () {

		var btnid = $(this).data("id");

		var name = $("#feedback_form_name" + btnid).val();
		var phone = $("#feedback_form_phone" + btnid).val();
		var email = $("#feedback_form_email" + btnid).val();
		var nameFriend = $("#feedback_form_nameFriend" + btnid).val();
		var phoneFriend = $("#feedback_form_phoneFriend" + btnid).val();

		var summ = $("#feedback_form_summa" + btnid + " option:selected").text();
		var day = $("#feedback_form_day" + btnid + " option:selected").text();


		var mess = $("#feedback_form_mess" + btnid).val();
		var url = $("#feedback_form_url" + btnid).val();
		// Получение значения checkbox
		var isChecked = $("#form-check").is(":checked");
		var isChecked2 = $("#form-check__quest").is(":checked");
		// Проверка значения checkbox
		if (!isChecked) {
			// Вывод сообщения об ошибке
			alert("Пожалуйста, примите политику конфиденциальности.");
			return; // Прерываем выполнение функции
		}
		// Проверка значения checkbox
		if (!isChecked2) {
			// Вывод сообщения об ошибке
			alert("Пожалуйста, примите политику конфиденциальности.");
			return; // Прерываем выполнение функции
		}
		if (name == "" || phone == "" || nameFriend == "" || phoneFriend == "") {

			$("#feedback_form_danger" + btnid).css("display", "");

		}
		else {

			$("#feedback_form_danger" + btnid).css("display", "none");
			$("#feedback_form_info" + btnid).css("display", "");

			$.ajax({
				type: "POST",
				url: "/local/components/main/send.form/templates/.default/ajax.php",
				data: { NAME: name, PHONE: phone, EMAIL: email, MESS: mess, SUM: summ, DAY: day, URL: url, NAMEFRIEND: nameFriend, PHONEFRIEND: phoneFriend },
				success: function (data) {

					$("#feedback_form_success" + btnid).css("display", "");

					$("#feedback_form_success" + btnid).css("display", "");
					$("#feedback_form_info" + btnid).css("display", "none");

					$("#feedback_form_name" + btnid).val("");
					$("#feedback_form_phone" + btnid).val("");
					$("#feedback_form_email" + btnid).val("");
					$("#feedback_form_mess" + btnid).val("");
					$("#feedback_form_url" + btnid).val("");
					$("#feedback_form_nameFriend" + btnid).val("");
					$("#feedback_form_phoneFriend" + btnid).val("");

					setTimeout(function () { $('#pModal').modal('hide') }, 1700);


				}
			});

		}

	});

Comments

[Stalker_RED]

Я так понимаю, у вас две одинаковые формы, и вся суть проверок сводится к проверке что несколько полей не пустые и к проверке галочки "примите политику"?

[Сергей Мурин]

Формы с одинаковыми полями да верно, но id разные у инпутов и кнопки отправить

<section class="quest">
	<div class="container">
		<div class="quest__body">
			<div class="quest__row">
				<div class="quest__title two__title">
					<h2>
						Остались вопросы? Давайте решим вашу проблему сегодня
					</h2>
				</div>

				<form class="form__quest" action="">
					<div class="form__quest">
						<div class="form__input__quest">
							<div class="form__input__box__quest">
								<input type="text" name="name" placeholder="Ваше имя*" id="feedback_form_name4">
								<input type="text" name="phone" placeholder="Телефон*" id="feedback_form_name4">
								<input type="hidden" id="feedback_form_url3" value="https://<?= $_SERVER['SERVER_NAME'] ?><?= $APPLICATION->GetCurDir() ?>">
							</div>
							<div class="form__check__quest">
								<input id="form-check__quest" type="checkbox" name="personal" required checked>
								<label class="form-check__label__quest" id="" for="form-check__quest">
									Нажимая кнопку «Отправить», вы принимаете политику
									конфиденциальности компании и даете согласие на обработку персональных
									данных
								</label>
							</div>
						</div>
					</div>
					<div class="">
						<div class="">
							<div class="">
								<div class="alert alert-success text-center" role="alert" id="feedback_form_success4" style="display:none;font-size:13px">
									Отлично! Ваша заявка успешно отправлена.
								</div>
								<div class="alert alert-danger text-center" role="alert" id="feedback_form_danger4" style="display:none;font-size:13px">
									Пожалуйста, заполните обязательные поля формы Имя и Телефон
								</div>
							</div>
						</div>
						<div class="class__item" style="text-align:center">
							<button type="button" class="form_submit form__btn__quest btn-red__form__quest" data-id="4">ОТПРАВИТЬ</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

и

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?>

<section class="screen-2">
	<div class="container">
		<div class="screen-2__row">


			<div class="screen-2__form form" style="display:flex;">
				<span class="screen-2__title">

					Заказать консультацию

				</span>


				<form class="form__top" action="">
					<div class="form__top">
						<div class="form__input">
							<div class="form__input__box">
								<input type="text" name="name" placeholder="Ваше имя*" id="feedback_form_name3">
								<input type="text" name="phone" placeholder="Телефон*" id="feedback_form_phone3">
								<input type="hidden" id="feedback_form_url3" value="https://<?= $_SERVER['SERVER_NAME'] ?><?= $APPLICATION->GetCurDir() ?>">
							</div>
							<div class="form__check">
								<input id="form-check" type="checkbox" name="personal" required checked>
								<label class="form-check__label" id="" for="form-check">
									Нажимая кнопку «Отправить», вы принимаете политику
									конфиденциальности компании и даете согласие на обработку персональных
									данных
								</label>
							</div>
						</div>
					</div>
					<div class="">
						<div class="">
							<div class="">
								<div class="alert alert-success text-center" role="alert" id="feedback_form_success3" style="display:none;font-size:13px">
									Отлично! Ваша заявка успешно отправлена.
								</div>
								<div class="alert alert-danger text-center" role="alert" id="feedback_form_danger3" style="display:none;font-size:13px">
									Пожалуйста, заполните обязательные поля формы Имя и Телефон
								</div>
							</div>

							<div class="" style="text-align:center;">
								<!-- <button type="button" class="form_submit btn-statics" data-id="3" >Отправить</button> -->
								<button type="button" class=" form_submit form__btn btn-red__form__btn" data-id="3">ОТПРАВИТЬ</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

[Сергей Мурин]

на другой странице есть еще 2 формы одна похожая на эти а у другая отличается тем что у нее 2 чекбокса в форме

[imko]

Так больно всегда смотреть на скриптовую валидацию с хардкодом набора полей

Answer 1

[Stalker_RED]

Зачем все так сложно?
Зачем писать проверку на пустоту, если есть required?
Зачем самому собирать данные со всех полей, если есть $(form).serialize() ?
Зачем добавлять к каждому полю id, если можно просто получать данные из текущей формы, а не по всей странице?
У вас 90% кода можно просто выбросить.
https://jsfiddle.net/ad86g4vu/1

с подсветкой полей
https://jsfiddle.net/ad86g4vu/2

Answer 2

[Михаил Ливач]

Не видя вёрстки, сложно дать ответ. Но мне кажется, проблема в этом:

var isChecked = $("#form-check").is(":checked");
var isChecked2 = $("#form-check__quest").is(":checked");

У Вас в остальных полях присутствует btnid , а тут нет.

P.S. Имхо, подход чудовищный. Надеюсь, Вы это со временем поймёте