Сделать кнопку неактивной пока не заполнены поля и не отмечены чекбоксы

Question

Есть вот такая форма (код на codepen.io):

function checkParams() {
  var name = $('#name').val();
  var email = $('#email').val();
  var phone = $('#phone').val();

  if (name.length != 0 && email.length != 0 && phone.length != 0) {
    $('#submit').removeAttr('disabled');
  } else {
    $('#submit').attr('disabled', 'disabled');
  }
}

$('#personaldata').change(function() {
  $('#submit').prop("disabled", !this.checked);
}).change()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="loyalty-form__checkboxes">
  <div class="loyalty-form__checkbox">
    <img class="loyalty-form__checkbox-img" src="<?php echo get_template_directory_uri() ?>/assets/images/static/checkcake.png" alt="">
    <input type="checkbox" class="loyalty-form__checkbox-style" name="cake" id="cakecheck" onkeyup="checkParams()">
    <label class="loyalty-form__checkbox-text" for="cakecheck">Хочу скидку на тортики <span class="loyalty-form__pink">*</span></label>
  </div>

  <div class="loyalty-form__checkbox">
    <img class="loyalty-form__checkbox-img" src="<?php echo get_template_directory_uri() ?>/assets/images/static/checkdrink.png" alt="">
    <input type="checkbox" class="loyalty-form__checkbox-style" name="drink" id="drinkcheck" onkeyup="checkParams()">
    <label class="loyalty-form__checkbox-text" for="drinkcheck">Очень люблю кофе, хочу скидку <span class="loyalty-form__pink">*</span></label>
  </div>
</div>

<form method="post" action="" id="forma" name="">
  <input id="name" onkeyup="checkParams()" class="form-element" type="text" placeholder="Введите имя" autocomplete="off" /><br>
  <input id="email" onkeyup="checkParams()" class="form-element" type="email" placeholder="Введите e-mail" autocomplete="off" /><br />
  <input id="phone" onkeyup="checkParams()" class="form-element" type="tel" placeholder="Введите телефон" autocomplete="off" /><br />
  <input type="button" id="submit" value="Отправить" disabled>

  <input type="checkbox" required="" name="check" id="personaldata">
  <label for="personaldata">Согласен(а) на обработку моих персональных данных</label>

Мне нужно, чтобы кнопка отправить была неактивна, пока не будут заполнены все поля по условию, не отмечена галочка согласен, и не отмечен один из двух верхних чекбоксов.

Отдельно у меня работает проверка полей, и проверка чекбокса согласия. Как совместить это всё в одну конструкцию?

Answer 1

// подписываюсь на ввод эл-ов
$(document).ready(function(){
  $("#name, #email, #phone, #personaldata").on('input', function(){
    enableSubmit(checkState());
  });
});

// валидация
function checkState(){
  let name = $('#name');
  let email = $('#email');
  let phone = $('#phone');
  let personalData = $('#personaldata');
  
  return (name && name.val().length > 0) &&
    (email && email.val().length > 0 && isEmail(email.val())) &&
    (phone && name.val().length > 0) &&
    (personalData.is(':checked'))
}

// проверка правильности e-mail
function isEmail(string) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(string).toLowerCase());
}

// включить/выключить кнопку "Отправить"
function enableSubmit(state) {
  $('#submit').prop("disabled", !state);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="loyalty-form__checkboxes">
  <div class="loyalty-form__checkbox">
    <img class="loyalty-form__checkbox-img" src="<?php echo get_template_directory_uri() ?>/assets/images/static/checkcake.png" alt="">
    <input type="checkbox" class="loyalty-form__checkbox-style" name="cake" id="cakecheck" onkeyup="checkParams()">
    <label class="loyalty-form__checkbox-text" for="cakecheck">Хочу скидку на тортики <span class="loyalty-form__pink">*</span></label>
  </div>

  <div class="loyalty-form__checkbox">
    <img class="loyalty-form__checkbox-img" src="<?php echo get_template_directory_uri() ?>/assets/images/static/checkdrink.png" alt="">
    <input type="checkbox" class="loyalty-form__checkbox-style" name="drink" id="drinkcheck" onkeyup="checkParams()">
    <label class="loyalty-form__checkbox-text" for="drinkcheck">Очень люблю кофе, хочу скидку <span class="loyalty-form__pink">*</span></label>
  </div>
</div>

<form method="post" action="" id="forma" name="">
  <input id="name" class="form-element" type="text" placeholder="Введите имя" autocomplete="off" /><br>
  <input id="email" class="form-element" type="email" placeholder="Введите e-mail" autocomplete="off" /><br />
  <input id="phone" class="form-element" type="tel" placeholder="Введите телефон" autocomplete="off" /><br />
  <input type="button" id="submit" value="Отправить" disabled>

  <input type="checkbox" required="" name="check" id="personaldata">
  <label for="personaldata">Согласен(а) на обработку моих персональных данных</label>

БЛОГ НА HUSL

Сделать кнопку неактивной пока не заполнены поля и не отмечены чекбоксы

Ответы (1 шт):