Multiform validation on next-CodePudding

I would really appreciate some help over here. I have one page containing a multiform using the <form> tag. I'm trying to show an alert of the <input> field is empty on clicking the <a> button next. I've managed to do so, I'm seeing the alert, however, after closing it, the form still proceeds. Also, my first card has no input, it is like a greeting card. Here are the snippets from the code:

// greeting -> q1 -> q2 = paths
// question with id=q2 defines quiz path
var paths = {
  "problem_1": [q3, q6, q7, q_finish],
  "problem_2": [q4, q6, q7, q_finish],
  "problem_3": [q5, q7, q_finish],
  "problem_4": [q_finish]
};


$(document).ready(function() {
  var cards = $(".card");

  //Selected in card with id=q2 path
  var selectedPath;

  //Prevents form submit by clicking enter
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });


  $(".form").submit(function(event) {
    var activeCard = $(".card_active");
    if (activeCard.attr("id") === "q_finish") {
      changeProgress(66, 33);
    }
  });

  $(".card a.btn").click(function(event) {
    event.preventDefault();



    var activeCard = $(".card_active");



    if (activeCard.attr("id") === "q1") {
      saveUserName(activeCard);

      changeProgress(100, 50);
    }

    var inputs = activeCard.find(':input');
    for (var i = 0; i < inputs.length; i  ) {
      var element = inputs[i];
      // validate elements..
      // for example for required:
      if (element.hasAttribute('required')) {
        if ($(element).val() === '') {
          alert('a field is required');
          // or do whatever you want with it..
        }
      }
    }

    //Changes active card (selected path or simply next card)
    if (selectedPath) {
      selectedPath[1]  = 1;
      var nextCard = paths[selectedPath[0]][selectedPath[1]];
      var nextCardIndex = cards.index(nextCard);

      showNextCard(cards, activeCard, nextCardIndex, true);
    } else {
      showNextCard(cards, activeCard, 1, false);
    }
  });

  //Shows/hides button on input
  $("input.card-input").on("input", function(event) {
    if ($(this).val()) {
      $(".card_active .btn-block")[0].classList.add("btn-block_shown");
    } else {
      $(".card_active .btn-block")[0].classList.remove("btn-block_shown");
    }
  });


});


//Changes value in progress bar
function changeProgress(px, proc) {
  var perc = $("#perc_line").css("width");
  perc = perc.replace("px", "");
  perc = Number(perc)   px;
  $("#perc_line").css("width", perc   "px");

  perc = $("#perc_num").html();
  perc = Number(perc)   proc;
  $("#perc_num").html(perc);

  // name 50% - 100px
  // radio 17% - 34px
  // phone 33% - 66px
}

//Changes active card
//parameter q2 defines card with id=q2, type bool
function showNextCard(cards, activeCard, step, q2) {
  var cardsLength = cards.length;
  var activeIndex = cards.index(activeCard);

  if (q2) {
    step -= activeIndex;
  }

  if (activeIndex   step < cardsLength) {
    activeCard.removeClass("card_active");
    cards.get(activeIndex   step).classList.add("card_active");
  }
}

//Saves user name
function saveUserName(activeCard) {
  var name = activeCard.find("input").val();

  $("#hello_name").html(name);
  $("#hello_name_2").html(name);
}

<div  id="q3">
  <div >
    <h2 >
      <div >3
        <svg height="10" width="11"><path d="M7.586 5L4.293 1.707 5.707.293 10.414 5 5.707 9.707 4.293 8.293z"></path><path d="M8 4v2H0V4z"></path></svg></div>
      Question 1 *</h2>
    <input  type="number" name="age" placeholder="examsple" required />
    <div >
      <a href="#" >Next</a>
      <span >This is <strong>required</strong></span>
    </div>
  </div>
</div>

CodePudding user response：

// greeting -> q1 -> q2 = paths
// question with id=q2 defines quiz path
var paths = {
  "problem_1": [q3, q6, q7, q_finish],
  "problem_2": [q4, q6, q7, q_finish],
  "problem_3": [q5, q7, q_finish],
  "problem_4": [q_finish]
};


$(document).ready(function() {
  var cards = $(".card");

  //Selected in card with id=q2 path
  var selectedPath;

  //Prevents form submit by clicking enter
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });


  $(".form").submit(function(event) {
    var activeCard = $(".card_active");
    if (activeCard.attr("id") === "q_finish") {
      changeProgress(66, 33);
    }
  });

  $(".card a.btn").click(function(event) {
    event.preventDefault();



    var activeCard = $(".card_active");



    if (activeCard.attr("id") === "q1") {
      saveUserName(activeCard);

      changeProgress(100, 50);
    }

    var inputs = activeCard.find(':input');
    for (var i = 0; i < inputs.length; i  ) {
      var element = inputs[i];
      // validate elements..
      // for example for required:
      if (element.hasAttribute('required')) {
        if ($(element).val() === '') {
          alert('a field is required');
          // or do whatever you want with it..
        }
      }
    }

    //Changes active card (selected path or simply next card)
    if (selectedPath) {
      selectedPath[1]  = 1;
      var nextCard = paths[selectedPath[0]][selectedPath[1]];
      var nextCardIndex = cards.index(nextCard);

      showNextCard(cards, activeCard, nextCardIndex, true);
    } else {
      showNextCard(cards, activeCard, 1, false);
    }
  });

  //Shows/hides button on input
  $("input.card-input").on("input", function(event) {
    if ($(this).val()) {
      $(".card_active .btn-block")[0].classList.add("btn-block_shown");
    } else {
      $(".card_active .btn-block")[0].classList.remove("btn-block_shown");
    }
  });


});


//Changes value in progress bar
function changeProgress(px, proc) {
  var perc = $("#perc_line").css("width");
  perc = perc.replace("px", "");
  perc = Number(perc)   px;
  $("#perc_line").css("width", perc   "px");

  perc = $("#perc_num").html();
  perc = Number(perc)   proc;
  $("#perc_num").html(perc);

  // name 50% - 100px
  // radio 17% - 34px
  // phone 33% - 66px
}

//Changes active card
//parameter q2 defines card with id=q2, type bool
function showNextCard(cards, activeCard, step, q2) {
  var cardsLength = cards.length;
  var activeIndex = cards.index(activeCard);

  if (q2) {
    step -= activeIndex;
  }

  if (activeIndex   step < cardsLength) {
    activeCard.removeClass("card_active");
    cards.get(activeIndex   step).classList.add("card_active");
  }
}

//Saves user name
function saveUserName(activeCard) {
  var name = activeCard.find("input").val();

  $("#hello_name").html(name);
  $("#hello_name_2").html(name);
}

<div  id="q3">
  <div >
    <h2 >
      <div >3
        <svg height="10" width="11"><path d="M7.586 5L4.293 1.707 5.707.293 10.414 5 5.707 9.707 4.293 8.293z"></path><path d="M8 4v2H0V4z"></path></svg></div>
      Question 1 *</h2>
    <input  type="number" name="age" placeholder="examsple" required />
    <div >
      <a href="https://stacksnippets.net/js" >Next</a>
      <span >This is <strong>required</strong></span>
    </div>
  </div>
</div>

CodePudding user response：

folks,

I've managed to solve the issue by ending the process after the alert displayed.

    var inputs = activeCard.find(':input');
for (var i = 0; i < inputs.length; i  ) {
  var element = inputs[i];
  // validate elements..
  // for example for required:
  if (element.hasAttribute('required')) {
    if ($(element).val() === '') {
      alert('a field is required');
      return;
    }
  }
}