堆栈内存溢出
  繁体   English   中英

表单中的复选框验证

[英]Checkbox validation in form

 原文  2020-04-28 08:13:15  7   1    javascript/ jquery/ forms/ validation

问题描述

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

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

1 个解决方案

解决方案1
 0 已采纳  2020-04-28 08:45:36

<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.

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript复选框表单验证 jQuery复选框验证（不带表单） 输入字段表单验证 - 复选框 genvalidator：检查表单验证中的复选框 jquery 表单验证不适用于复选框 未重置Boostrap表单验证表单复选框 如何为AngularJS表单验证至少要求1个复选框？ 表单验证 - 一组中至少需要一个复选框 如何使复选框删除表单中的“必需”验证 JavaScript表单验证复选框和单选按钮不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM