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

Posted 2023-05-09

【中文标题】输入字段表单验证 - 复选框

【英文标题】：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() 在哪里调用？我在任何地方都没有看到任何按钮或点击事件？

我认为您应该创建一个按钮并在其上单击事件，然后检查是否选中了复选框。

【参考方案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 以设置样式复选框。