Input field form validation - checkbox

Question

I am just learning input fields and validation and cannot solve the problem in order to have email sent while the input field is checked. If not, it should show us the information" Accept policy".

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>

Where is `validateContact()` called? I don't see any button or on click event anywhere for it? — palaѕн, Apr 28 '20 at 06:24
I think you should create a button and click event on it, and then check if checkbox is checked or not. — jkalandarov, Apr 28 '20 at 06:26

score 0 · Answer 1 · answered Apr 28 '20 at 06:28

0

call validateContact function on button click event.

answered Apr 28 '20 at 06:28

Always_a_learner

1,254
1
8
16

score 0 · Answer 2 · answered Apr 28 '20 at 06:54

$(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');
              }
          });
      }

score 0 · Answer 3 · answered Apr 28 '20 at 07:30

Fire the function on form submit and validate the form-

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>

Check the answer here to style checkbox.

Input field form validation - checkbox

3 Answers3