next上的多表单验证

Question

我真的很感激你在这里的帮助。我有一个包含使用<form>标记的多表单的页面。我试图显示<input>字段的警报是空的，然后单击<a>按钮。我已经设法做到了，我看到了警报，但是，关闭它后，表单仍然在进行。而且，我的第一张卡片没有输入，它就像一张贺卡。以下是代码片段:

// 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 class="card" id="q3">
<div class="card-body">
<h2 class="card-title">
<div class="card-number">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 class="card-input" type="number" name="age" placeholder="examsple" required />
<div class="btn-block">
<a href="#" class="btn btn-primary">Next</a>
<span class="card-extra-text">This is <strong>required</strong></span>
</div>
</div>
</div>

Answer 1

// 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 class="card" id="q3">
<div class="card-body">
<h2 class="card-title">
<div class="card-number">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 class="card-input" type="number" name="age" placeholder="examsple" required />
<div class="btn-block">
<a href="https://stacksnippets.net/js" class="btn btn-primary">Next</a>
<span class="card-extra-text">This is <strong>required</strong></span>
</div>
</div>
</div>

Answer 2

乡亲们，

我已经设法通过在警报显示后结束进程来解决问题。

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;
}
}
}