Почему js не проверяет checkbox
Скрипт отправляет данные на сервер при любом раскладе checkbox. Не понимаю в чем может быть проблема.
$("#sendMail").on("click", function () {
//создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
var formData = new FormData();
//не забывайти проверить поля на заполнение
//код проверки полей опустим, он к статье не имеет отнашение
//присоединяем наш файл
jQuery.each($('#file_v')[0].files, function(i, file) {
formData.append('file_v', file);
});
//присоединяем остальные поля
let name = $("#name").val().trim();
let email = $("#email").val().trim();
let tel = $("#tel").val().trim();
let number_order = $("#number_order").val().trim();
let message = $("#message").val().trim();
let checkbox_check = $("checkbox_check").val();
/******************************************************/
if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || checkbox_check === '') {
alert("Введите обязательные поля");
return false;
}
formData.append('name', name);
formData.append('email', email);
formData.append('tel', tel);
formData.append('number_order', number_order);
formData.append('message', message);
/******************************************************/
//отправляем через ajax
$.ajax({
url: "assets/ajax/mail.php",
type: "POST",
dataType : "json",
cache: false,
contentType: false,
processData: false,
data: formData, //указываем что отправляем
beforeSend: function () {
$("#form_contact").prop("disable", true);
$( ".petrov").show();
},
success: function(data){
$("#form_contact").trigger("reset");
$( ".petrov").hide();
console.log(data);
alert('Сообщение отправлено!');
$(".Modal").show();
}
});
return false;
}); <form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form"> <!---->
<div class="row">
<div class="col-lg-6">
<div class="input-box has-feedback nameBlock">
<label for="name" class="control-label">Имя*</label>
<input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="email" class="control-label">Email-адрес*</label>
<input required type="email" id="email" placeholder="Email" name="email" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="tel" class="control-label">Номер телефона*</label>
<input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="number_order" class="control-label">№ заказа*</label>
<input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-12">
<div class="input-box">
<label for="message" class="control-label">Сообщение*</label>
<textarea required class="_req" id="message" name="message"
placeholder="Сообщение" class="_req">
</textarea>
</div>
</div><!-- /.col-lg-12 -->
<div class="col-lg-12">
<div class="file">
<div class="file__item">
<input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
<div class="file__button">Прикрепить файл</div>
</div>
<div id="formPreview" class="file__preview"></div>
</div>
</div>
<div class="col-lg-12">
<div class="checkbox">
<input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input _req">
<label for="checkbox_check" class="checkbox__label"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
</div>
</div>
<div class="col-lg-12 text-left">
<br>
<button id="sendMail" class="main-btn"> Отправить </button>
</div>
</div>
</form>Или не так нужно его проверять?)
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
У чекбокса нет знчения val, есть свойство checked. Наверное должно быть так:
let checkbox_check = $("#checkbox_check").prop('checked');
...
if (..... || !checkbox_check) {
На счёт проверки if для checkbox_check не уверен. зачем он нужнен - знаете только вы
Также у селектора вы забыли решётку проставить
$("#sendMail").on("click", function () {
//создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
var formData = new FormData();
//не забывайти проверить поля на заполнение
//код проверки полей опустим, он к статье не имеет отнашение
//присоединяем наш файл
jQuery.each($('#file_v')[0].files, function(i, file) {
formData.append('file_v', file);
});
//присоединяем остальные поля
let name = $("#name").val().trim();
let email = $("#email").val().trim();
let tel = $("#tel").val().trim();
let number_order = $("#number_order").val().trim();
let message = $("#message").val().trim();
// let checkbox_check = $("checkbox_check").val();
let checkbox_check = $("#checkbox_check").prop('checked');
if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
alert("Введите обязательные поля");
return false;
}
alert('супер!');
formData.append('name', name);
formData.append('email', email);
formData.append('tel', tel);
formData.append('number_order', number_order);
formData.append('message', message);
/******************************************************/
//отправляем через ajax
$.ajax({
url: "assets/ajax/mail.php",
type: "POST",
dataType : "json",
cache: false,
contentType: false,
processData: false,
data: formData, //указываем что отправляем
beforeSend: function () {
$("#form_contact").prop("disable", true);
$( ".petrov").show();
},
success: function(data){
$("#form_contact").trigger("reset");
$( ".petrov").hide();
console.log(data);
alert('Сообщение отправлено!');
$(".Modal").show();
}
});
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form"> <!---->
<div class="row">
<div class="col-lg-6">
<div class="input-box has-feedback nameBlock">
<label for="name" class="control-label">Имя*</label>
<input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="email" class="control-label">Email-адрес*</label>
<input required type="email" id="email" placeholder="Email" name="email" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="tel" class="control-label">Номер телефона*</label>
<input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="number_order" class="control-label">№ заказа*</label>
<input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="_req">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-12">
<div class="input-box">
<label for="message" class="control-label">Сообщение*</label>
<textarea required class="_req" id="message" name="message"
placeholder="Сообщение" class="_req">
</textarea>
</div>
</div><!-- /.col-lg-12 -->
<div class="col-lg-12">
<div class="file">
<div class="file__item">
<input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
<div class="file__button">Прикрепить файл</div>
</div>
<div id="formPreview" class="file__preview"></div>
</div>
</div>
<div class="col-lg-12">
<div class="checkbox">
<input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input _req">
<label for="checkbox_check" class="checkbox__label"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
</div>
</div>
<div class="col-lg-12 text-left">
<br>
<button id="sendMail" class="main-btn"> Отправить </button>
</div>
</div>
</form>