输入字段表单验证 - 复选框答案

【问题标题】：Input field form validation - checkbox输入字段表单验证 - 复选框
【发布时间】：2020-08-11 21:25:09
【问题描述】：

我只是在学习输入字段和验证，无法解决问题以便在检查输入字段时发送电子邮件。如果不是，它应该向我们显示信息“接受政策”。

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>

【问题讨论】：

validateContact() 在哪里调用？我在任何地方都没有看到任何按钮或点击事件？
我认为您应该创建一个按钮并在其上单击事件，然后检查是否选中了复选框。

标签： javascript jquery forms validation input

【解决方案1】：

在按钮点击事件上调用 validateContact 函数。

【讨论】：

【解决方案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');
              }
          });
      }

【讨论】：

【解决方案3】：

触发表单提交功能并验证表单-

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>

检查答案here 以设置样式复选框。

【讨论】：