База знаний

Кастомная валидация форм

Проект в Webflow

<style>
.custom-error {
	display: none;
}

.invalid + .custom-error{
	display: block;
}
/*
.submit-disabled {
	pointer-events: none;
}
*/
</style>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<script>
$("form").validate({
  errorClass: "invalid",
  errorPlacement: function (error, element) {
  }
});

// Этот код добавляет класс submit-disabled к кнопке откправки
$("form").each(function () {
  const submitButton = $(this).find("[type=submit]");
  $(this)
    .find("input[required]")
    .each(function () {
      $(this).keyup(function () {
        if ($("form").validate().checkForm()) {
          submitButton.removeClass("submit-disabled");
        } else {
          submitButton.addClass("submit-disabled");
        }
      });
    });
});
</script>