ビューのフォームにウィザードステップを使用しています。プロジェクトはMVC3にあります。
3つのステップで作成されたフォームがあります。つまり、フォームの各ステップに3つのタグがあり、次の2つのボタンがあります。
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><
<p><input type="button" value="Back id="back-step" name="back-step"></p>
私の最初のステップにはたくさんのTextBoxesがDropDownlistsありTextAreas、2番目のステップにはクライアント側の機能がたくさんあります。1つの例は、ユーザーがテーブルから別のテーブルに行を移動できることなどです。そして、次のJquery検証があります。
var customTbl = $('#CustomPickedTable');
var has1 = customTbl.find('td[data-row="1"]').is('*');
var has2 = customTbl.find('td[data-row="2"]').is('*');
var has3 = customTbl.find('td[data-row="3"]').is('*');
var has4 = customTbl.find('td[data-row="4"]').is('*');
if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
jAlerts("Saved", "Info");
} else {
jAlert('You have to move atleast one row from each table', "Varning"); ;
return false
}
3番目のステップでは、作成されたもののレビューだけで、ユーザーがフォームをクリックすると、次のステップのボタンがフォームを送信します。
私ができるようにしたいのは、ユーザーが2番目のステップにいて、次のステップのボタンをクリックすると、上記のjquery検証が実行されることです。ウィザードステップのコードでは、すべてに次のステップのボタンセレクターを使用しているため、これを行うことはできません。これに対する解決策はありますか？
Jquery検証コードを中に入れようとしました
$("#next-step").click(function () {
}
しかし、ユーザーが[次へ]ボタンをクリックするたびにjquery検証コードが実行されます。これは、テーブルがフォームに表示されているが非表示になっているため、ユーザーが[次へ]をクリックすると最初のステップで検証がトリガーされるためです。そのため、そのソリューションは機能しませんでした。
これは私のウィザードステップのJqueryコードであり、現在、下部にJquery検証があります。つまり、3番目のステップで次のステップのボタンをクリックすると、検証してから投稿します。しかし、私はそれがそのようになりたくありません。2番目のステップで検証を実行したいと思います。
コードは次のとおりです。
$(function () {
$(".wizard-step:first").fadeIn(); // show first step
// attach backStep button handler
// hide on first step
$("#back-step").hide().click(function () {
var $step = $(".wizard-step:visible"); // get current step
if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
$step.hide().prev().fadeIn(4500); // show it and hide current step
// disable backstep button?
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
// attach nextStep button handler
$("#next-step").click(function () {
var $step = $(".wizard-step:visible"); // get current step
var validator = $("form").validate(); // obtain validator
var anyError = false;
$step.find("select").each(function () {
if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
$step.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
$("#next-step").click(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
if ($step.next().hasClass("confirm")) { // is it confirmation?
// show confirmation asynchronously
$.post("/wizard/confirm", $("form").serialize(), function (r) {
// inject response in confirmation step
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) { // is there any next step?
$step.hide().next().fadeIn(4500); // show it and hide current step
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step, submit form
var selectedQuestions = $("#SelectedQuestions");
var selectedCustomQuestions = $("#SelectedCustomQuestions");
var currentIds = new Array();
var currentText = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
});
$('#CustomPickedTable td[data-attr-id]').each(function () {
var ClickedText = $(this).html();
currentText.push(ClickedText);
});
selectedCustomQuestions.val(currentText.join("|"));
selectedQuestions.val(currentIds.join(","));
var customTbl = $('#CustomPickedTable');
var has1 = customTbl.find('td[data-row="1"]').is('*');
var has2 = customTbl.find('td[data-row="2"]').is('*');
var has3 = customTbl.find('td[data-row="3"]').is('*');
var has4 = customTbl.find('td[data-row="4"]').is('*');
if ((has1 === true) && (has2 === true) && (has3 === true) && (has4 === true)) {
jAlerts("saved", "Info");
} else {
jAlert('You have to move atleast one row from each table', "Varning"); ;
}
return false;
}
});
私のHTMLコードは次のようになります。
<div class="wizard-step>
//step 1 content
</div>
<div class="wizard-step>
//step 2 content
</div>
<div class="wizard-step>
//step 3 content
</div>
<p><input type="button" id="next-step" class="next-step-client-val" name="next-step" value="Next" /></p><
<p><input type="button" value="Back id="back-step" name="back-step"></p>