表单中的复选框验证

我有这样的代码，在选中复选框字段时无法验证它。你能帮我吗？我的意思是只有复选框输入字段中的#check id。有些东西对我不起作用。电子邮件工作正常，名字也一样，但复选框我不知道如何验证它，让用户检查它。如果没有，它应该给我们信息"接受政策"。

$(function() {
var form = document.querySelector("#form");
form.addEventListener("submit", function(e) {
e.preventDefault();
var valid;
valid = validateContact();
if (valid) {
jQuery.ajax({
url: "contact-form.php",
data: '&name=' + $("#name").val() +
'&email=' + $("#email").val() +
'&address=' + $("#address").val() +
'&check=' + $("#check").val() +
'&message=' + $("#message").val(),
type: "POST",
success: function() {
document.getElementById("form").reset();
$('#contact-after-msg').text('Dziękujemy za złożenie zamówienia. Odezwiemy się do Państwa jeszcze dziś.');
},
error: function() {
alert('Coś poszło nie tak, spróbuj ponownie');
}
});
}
function validateContact() {
var valid = true;
if (!$("#name").val()) {
$("#name").css("border", "solid 1px #ff5d5d");
$("#name-info").html("Podaj imię i nazwisko");
valid = false;
} else {
$("#name").css("border", "none");
$("#name-info").html("");
}
if (!$("#address").val()) {
$("#address").css("border", "solid 1px #ff5d5d");
$("#address-info").html("Podaj adres wysyłki");
valid = false;
} else {
$("#address").css("border", "none");
$("#address-info").html("");
}
if (!$("#email").val()) {
$("#email").css("border", "solid 1px #ff5d5d");
$("#email-info").html("Podaj adres e-mail");
valid = false;
} else if (!$("#email").val().match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
$("#email").css("border", "solid 1px #ff5d5d");
$("#email-info").html("Adres e-mail jest niepoprawny");
valid = false;
} else {
$("#email").css("border", "none");
$("#email-info").html("");
}
if (!$("#check").val().checked === true) {
$("#check").css("border", "solid 1px #ff5d5d");
$("#check-info").html("Accept Policy");
valid = false;
} else {
$("#check").css("border", "none");
$("#check-info").html("");
}
return valid;
}
});
});

<form class="t-contact-form__form" id="form" novalidate>
<div class="t-contact-form__item">
<span id="name-info"></span>
<input class="t-contact-form__field" name="name" placeholder="Imię i nazwisko" type="text" id="name" required>
</div>
<div class="t-contact-form__item">
<span id="email-info"></span>
<input class="t-contact-form__field" name="email" placeholder="Adres email" type="email" id="email" required>
</div>
<div class="t-contact-form__item">
<span id="address-info"></span>
<input class="t-contact-form__field" name="address" placeholder="Adres" type="text" id="address" required>
</div>
<div class="t-contact-form__item">
<textarea class="t-contact-form__field" name="message" placeholder="Masz dodatkowe życzenia? Zamawiasz więcej egzemplarzy?" required id="message"></textarea>
<div class="t-contact-form__item">
<span id="check-info"></span>
<h5><input class="t-contact-form__field u-mt-2" name="check" type="checkbox" id="check" required>I accept the terms.
</h5>
</div>
<div class="t-contact-form__button">
<button class="c-btn c-button c-button--contact-send" name="submit" type="submit" id="contact-submit">Buy</button>
<div class="t-contact-form__policy-buttons">
<a class="c-btn" href="images/REGULAMIN ZAMÓWIENI.pdf">Policy
<a class="c-btn" href="images/POLITYKA PRYWATNOŚCI.pdf">Terms
</div>
</div>
<div class="contact-msg-success" id="contact-after-msg"></div>
</div>
</form>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<form class="t-contact-form__form" id="form" novalidate>
<div class="t-contact-form__item">
<span id="name-info"></span>
<input class="t-contact-form__field" name="name" placeholder="Imię i nazwisko" type="text" id="name" required>
</div>
<div class="t-contact-form__item">
<span id="email-info"></span>
<input class="t-contact-form__field" name="email" placeholder="Adres email" type="email" id="email" required>
</div>
<div class="t-contact-form__item">
<span id="address-info"></span>
<input class="t-contact-form__field" name="address" placeholder="Adres" type="text" id="address" required>
</div>
<div class="t-contact-form__item">
<textarea class="t-contact-form__field" name="message" placeholder="Masz dodatkowe życzenia? Zamawiasz więcej egzemplarzy?" required id="message"></textarea>
<div class="t-contact-form__item">
<span id="check-info"></span>
<h5><input class="t-contact-form__field u-mt-2" name="check" type="checkbox" id="check" required>I accept the terms.
</h5>
</div>
<div class="t-contact-form__button">
<button class="c-btn c-button c-button--contact-send" name="submit" type="submit" id="contact-submit">Buy</button>
<div class="t-contact-form__policy-buttons">
<a class="c-btn" href="images/REGULAMIN ZAMÓWIENI.pdf">Policy
<a class="c-btn" href="images/POLITYKA PRYWATNOŚCI.pdf">Terms
</div>
</div>
<div class="contact-msg-success" id="contact-after-msg"></div>
</div>
</form>
<script>
$(function() {
var form = document.querySelector("#form");
form.addEventListener("submit", function(e) {
e.preventDefault();
var valid;
valid = validateContact();
if (valid) {
jQuery.ajax({
url: "contact-form.php",
data: '&name=' + $("#name").val() +
'&email=' + $("#email").val() +
'&address=' + $("#address").val() +
'&check=' + $("#check").val() +
'&message=' + $("#message").val(),
type: "POST",
success: function() {
document.getElementById("form").reset();
$('#contact-after-msg').text('Dziękujemy za złożenie zamówienia. Odezwiemy się do Państwa jeszcze dziś.');
},
error: function() {
alert('Coś poszło nie tak, spróbuj ponownie');
}
});
}
function validateContact() {
var valid = true;
if (!$("#name").val()) {
$("#name").css("border", "solid 1px #ff5d5d");
$("#name-info").html("Podaj imię i nazwisko");
valid = false;
} else {
$("#name").css("border", "none");
$("#name-info").html("");
}
if (!$("#address").val()) {
$("#address").css("border", "solid 1px #ff5d5d");
$("#address-info").html("Podaj adres wysyłki");
valid = false;
} else {
$("#address").css("border", "none");
$("#address-info").html("");
}
if (!$("#email").val()) {
$("#email").css("border", "solid 1px #ff5d5d");
$("#email-info").html("Podaj adres e-mail");
valid = false;
} else if (!$("#email").val().match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
$("#email").css("border", "solid 1px #ff5d5d");
$("#email-info").html("Adres e-mail jest niepoprawny");
valid = false;
} else {
$("#email").css("border", "none");
$("#email-info").html("");
}

if (!$('#check').is(':checked')) {
$("#check").css("border", "solid 1px #ff5d5d");
$("#check-info").html("Accept Policy");
valid = false;
} else {
$("#check").css("border", "none");
$("#check-info").html("");
}
return valid;
}
});
});
</script>
if (!$('#check').is(':checked')) { This line validate checkbox selected or not. Hope it helps.

相关内容

最新更新

热门标签：