Проверка формы поля ввода - флажок

Question

Я только изучаю поля ввода и проверку и не могу решить проблему, чтобы отправить электронное письмо, пока поле ввода проверено. Если нет, он должен показать нам информацию «Принять политику».

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>

Answer 1

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

Answer 2

Запустите функцию отправки формы и подтвердите форму.

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>

Проверьте ответ здесь , чтобы установить флажок.

Answer 3

вызов функции validateContact для события нажатия кнопки.