我只是在学习输入字段和验证,无法解决问题,以便在检查输入字段时发送电子邮件。如果没有,它将向我们显示“接受策略”信息。
function validateContact() {
var valid = true;
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;
}
<span id="check-info"></span>
<h5><input class="t-contact-form__field u-mt-2" name="check" type="checkbox" id="check"
required>I know the policy and accept.</h5>
答案 0 :(得分:0)
在按钮单击事件上调用validateContact函数。
答案 1 :(得分:0)
$(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');
}
});
}
答案 2 :(得分:0)
在表单提交时触发该功能并验证表单-
function validateContact() {
let valid = true;
if ($("#check").is(":checked")) {
// $("#check").css("border", "none"); // HTML doesn't allow to style checkbox, it is only possible to hide the default one and adding your own custom checkbox
$("#check-info").text("");
}else{
// $("#check").css({"outline": "1px solid #ff5d5d"}); // -- You can try outline but it won't work as expected.
$("#check-info").css({"color": "#ff5d5d"});
$("#check-info").text("Please accept policy");
valid = false;
}
//alert(valid);
return valid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="return validateContact();" action="#" method="POST">
<span id="check-info"></span>
<h5><input class="t-contact-form__field u-mt-2" name="check" type="checkbox" id="check">I know the policy and accept.</h5>
<button type="submit">Submit</button>
</form>