輸入字段表單驗證 - 復選框

Question

我只是在學習輸入字段和驗證，無法解決問題，以便在檢查輸入字段時發送 email。 如果不是，它應該向我們顯示信息“接受政策”。

 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>

Answer 1

在按鈕單擊事件上調用 validateContact function。

Answer 2

 $(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'); } }); }

Answer 3

在表單提交時觸發 function 並驗證表單-

 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>

在此處檢查樣式復選框的答案。