Ad

Checkbox Validation In Form

- 1 answer

I have a code like this and cannot validate the checkbox field while it is checked. Can you help me please? I mean only the #check id in checkbox input field. Something doesn't work me. Email works correctly, name also, but the checkbox I don't know how to validate it to have it checked by user. If not it should give us information "Accept policy".

$(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-\.][email protected]([\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" target="_blank" rel="nofollow noreferrer" href="images/REGULAMIN ZAMÓWIENI.pdf">Policy
        <a class="c-btn" target="_blank" rel="nofollow noreferrer" href="images/POLITYKA PRYWATNOŚCI.pdf">Terms
      </div>
    </div>
    <div class="contact-msg-success" id="contact-after-msg"></div>
  </div>
</form>

Ad

Answer

<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" target="_blank" rel="nofollow noreferrer" href="images/REGULAMIN ZAMÓWIENI.pdf">Policy
        <a class="c-btn" target="_blank" rel="nofollow noreferrer" 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-\.][email protected]([\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.
Ad
source: stackoverflow.com
Ad