[英]Checkbox validation in form
I have a code like this and cannot validate the checkbox field while it is checked.我有这样的代码,并且在选中复选框时无法验证复选框字段。 Can you help me please?你能帮我吗? I mean only the #check id in checkbox input field.我的意思是复选框输入字段中的#check id。 Something doesn't work me.有些东西对我不起作用。 Email works correctly, name also, but the checkbox I don't know how to validate it to have it checked by user. Email 工作正常,名称也一样,但复选框我不知道如何验证它以让用户检查它。 If not it should give us information "Accept policy".如果不是,它应该给我们信息“接受政策”。
$(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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.