表单中的复选框验证

Posted

技术标签:

【中文标题】表单中的复选框验证【英文标题】：Checkbox validation in form 【发布时间】：2020-08-11 23:51:06 【问题描述】：

我有这样的代码，并且在选中复选框时无法验证复选框字段。你能帮我吗？我的意思是复选框输入字段中的#check id。有些东西对我不起作用。 电子邮件可以正常工作，名称也可以，但是我不知道如何验证它以让用户检查该复选框。如果不是，它应该给我们信息“接受政策”。 

$(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>

【问题讨论】：

***.com/search?q=checkbox+is+checked 这能回答你的问题吗？ How do I check whether a checkbox is checked in jQuery? 当问题与 jQuery Validate 插件无关时，请不要使用 jQuery Validate 标记问题。已编辑。 【参考方案1】： 
<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.

【讨论】：

以上是关于表单中的复选框验证的主要内容，如果未能解决你的问题，请参考以下文章

symfony2 中的复选框验证

表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder

使用 javascript 验证 HTML 表单中的条件

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

Angular 反应式表单自定义验证器。仅在选中复选框时启用验证

Angular 反应式表单复选框验证