@greedy_wizard

Как создать проверку для полей формы?

Помогите создать проверку для определенных полей формы (мейл, фото, телефон) А так же настроить кнопку Отправки чтобы данные отправлялись на почту
$(document).ready(function(){
  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;
  setProgressBar(current);

  $(".next").click(function(){
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //Add Class Active
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
      step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        next_fs.css({'opacity': opacity});
      },
      duration: 500
    });
    setProgressBar(++current);
  });

  $(".previous").click(function(){

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //Remove class active
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show();

    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
      step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        previous_fs.css({'opacity': opacity});
      },
      duration: 500
    });
    setProgressBar(--current);
  });

  function setProgressBar(curStep){
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width",percent+"%")
  }

  $(".submit").click(function(){
    return false;
  })
});

Codepen
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
@Floatname
При клике на Next получите все инпуты с required на активной карточке и проверьте их значения. Если пустых значений нет - разрешайте переход дальше, если есть - прерывайте выполнение функции и выводите предупреждение о незаполненных полях.
Ну и да, всем инпутам все же надо required прописать
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы