【发布时间】：2015-04-17 00:16:06
【问题描述】：
我使用JQuery Steps 作为我的注册表单。我使用的步骤是：个人 > 公司 > 确认。如果文本框为空，我希望我的错误消息显示在“占位符”中，如果文本框有内容，则显示 Toastr。
这一切在我第一次调试时完美运行。我所有的自定义消息都显示出来了，Toastr 的工作正常。 但是，如果我再次尝试注册另一个用户，我的自定义消息会丢失，它会在占位符中显示标准消息，但是如果我输入了无效的电子邮件，那么除了文本框之外，我不会收到任何消息变红了，我无法进行下一步。 即使我停止调试并重新启动它，toastr 和自定义消息也消失了。如果我重新启动计算机，它会再次运行。
我已经阅读了关于事件委托的内容，我猜想它与此有关，但我的问题是我的事件是 JQuery Steps 事件，如 onStepChanging、onFinished 等，我不知道如何处理那些的代表团。
这是我的 Ajax 表单。 _RegisterDetails 将生成一个表，其中包含前两步输入的所有信息：
<div id="steps-body-container" class="animated fadeInDown">
@using (Ajax.BeginForm("_RegisterDetails", "Account", new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ajaxContent",
LoadingElementId = "loading"
}, new { defaultButton = "next-button" }))
{
@Html.AntiForgeryToken()
<h3>Användare</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Fyll i användaruppgifter</h4>
</div>
<div class="sm-empty-div"></div>
@Html.ValidationSummary()
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
@Html.TextBoxFor(m => m.SurName, new {@class = "form-control user-textbox-left-1", placeholder = "Förnamn", @type = "SurName"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
@Html.TextBoxFor(m => m.LastName, new {@class = "form-control user-textbox-right-1", placeholder = "Efternamn", @type = "LastName"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
@Html.TextBoxFor(m => m.Email, new {@class = "form-control user-textbox-left-2", placeholder = "Email", @type = "EmailAddress"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-phone"></i>
</span>
@Html.TextBoxFor(m => m.PhoneNumber, new {@class = "form-control user-textbox-right-2", placeholder = "Telefonnummer", @type = "PhoneNumber"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-unlock"></i>
</span>
@Html.PasswordFor(m => m.Password, new {@class = "form-control user-textbox-left-3", placeholder = "Lösenord", @type = "Password"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
@Html.PasswordFor(m => m.ConfirmPassword, new {@class = "form-control user-textbox-right-3", placeholder = "Bekräfta lösenord", @type = "Password"})
</div>
</div>
</fieldset>
<h3>Företag</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Fyll i företagsuppgifter</h4>
</div>
<div class="sm-empty-div"></div>
@Html.ValidationSummary()
<div class="row register-textbox">
<div class="col-md-12 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-home"></i>
</span>
@Html.TextBoxFor(m => m.Name, new {@class = "form-control comp-texbox-1", placeholder = "Namn på företag"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-road"></i>
</span>
@Html.TextBoxFor(m => m.Street, new {@class = "form-control comp-texbox-left-2", placeholder = "Gatuadress"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
@Html.TextBoxFor(m => m.ZipCode, new {@class = "form-control comp-texbox-right-2", placeholder = "Postnummer"})
</div>
</div>
<div class="row register-textbox">
<div class="col-md-6 pull-left form-group input-group">
<span class="input-group-addon">
<i class="fa fa-building"></i>
</span>
@Html.TextBoxFor(m => m.City, new {@class = "form-control comp-texbox-left-3", placeholder = "Stad"})
</div>
<div class="col-md-6 pull-right form-group input-group">
<span class="input-group-addon">
<i class="fa fa-globe"></i>
</span>
@Html.TextBoxFor(m => m.Country, new {@class = "form-control comp-texbox-right-3", placeholder = "Land"})
</div>
</div>
<input type="submit" value="submit" id="submit-btn" defaultbutton="next-button" style="display: none" />
</fieldset>
<h3>Bekräfta</h3>
<fieldset class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Bekräfta dina uppgifter</h4>
</div>
<div class="sm-empty-div"></div>
<div id="ajaxContent">
</div>
<div id="loading"><i class="fa fa-4x fa-cog fa-spin"></i>
</div>
</fieldset>
}
</div>
这是我的 Steps 脚本，我的验证和 Ajax 调用将信息保存到 DB。
$('#submit-btn').trigger("click");触发提交按钮的点击功能，因为 Steps 为下一步和完成生成了自己的按钮，所以我不得不在第二步和第三步之间单击下一步与在表单上单击提交相同。
var registrationModel;
var form = $("#form0").show();
//Runs on Successful Ajax-post.
function RegisterSuccess(surName){
toastr.options = {
closeButton: "true",
preventDuplicates: "true",
showDuration: "400",
hideDuration: "400",
timeOut: "5000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "slideDown",
hideMethod: "slideUp"
};
toastr.success("Ditt konto skapades korrekt. Välkommen till Mina Sidor, " + surName + "!");
}
$("#form0").steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
transitionEffectSpeed: 700,
showFinishButtonAlways: false,
onStepChanging: function(event, currentIndex, newIndex) {
//Allow backtracking between second and first step.
if (currentIndex === 1 && newIndex === 0) {
return true;
}
//
if (currentIndex === 2 && newIndex === 1) {
$(".content").animate({
height: "0px"
}, 1000);
}
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
var priorTab = $("#form0-t-" + priorIndex);
priorTab.removeClass("error");
if (priorIndex === 1 && currentIndex === 2) {
$(function () {
$('#submit-btn').trigger("click");
});
$(".content").animate({
height: "500px"
}, 1000);
}
},
onFinished: function (event, currentIndex) {
registrationModel = {
SurName: document.getElementById("SurName").value,
LastName: document.getElementById("LastName").value,
Email: document.getElementById("Email").value,
PhoneNumber: document.getElementById("PhoneNumber").value,
Password: document.getElementById("Password").value,
Name: document.getElementById("Name").value,
Street: document.getElementById("Street").value,
ZipCode: document.getElementById("ZipCode").value,
City: document.getElementById("City").value,
Country: document.getElementById("Country").value
};
//Save information to DB
$.ajax({
url: '@Url.Action("SaveRegisterDetailsToDb")',
type: "POST",
data: JSON.stringify(registrationModel),
dataType: "text",
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
},
success: function (data) {
if (data === "success") {
RegisterSuccess(registrationModel.SurName);
setTimeout(function() {
var url = '@Url.Action("Index", "Customer")';
window.location.href = url;
}, 5000);
}
},
contentType: "application/json"
});
},
autoFocus: true
}).validate({
rules: {
SurName: {
required: true,
minlength: 2
//textonly: true
},
LastName: {
required: true,
minlength: 2
//textonly: true
},
Email: {
required: true,
email: true
},
PhoneNumber: {
required: true,
number: true,
minlength: 7
},
Password: {
required: true,
minlength: 6
},
ConfirmPassword: {
equalTo: "#Password"
},
Name: {
required: true,
minlength: 2
//textonly: true
},
Street: {
required: true,
minlength: 4
},
ZipCode: {
required: true,
number: true,
minlength: 5
},
City: {
required: true,
//textonly: true,
minlength: 2
},
Country: {
required: true,
//textonly: true,
minlength: 2
}
},
//Sorry for all the swedish in the messages. :)
messages: {
SurName: {
required: "Skriv i ditt förnamn här.",
minlength: "Ditt förnamn måste innehålla minst 2 bokstäver."
//textonly: true
},
LastName: {
required: "Skriv i ditt efternamn här.",
minlength: "Ditt efternamn måste innehålla minst 2 bokstäver"
//textonly: true
},
Email: {
required: "Skriv i din email här.",
email: "Din email måste vara i ett korrekt format, {XX@XX.XX}"
},
PhoneNumber: {
required: "Skriv i ditt telefonnummer här.",
number: "Ditt telefonnummer får endast bestå av siffror.",
minlength: "Ditt telefonnummer måste innehålla minst 7 siffror."
},
Password: {
required: "Skriv i ditt lösenord här.",
minlength: "Ditt lösenord måste innehålla minst 6 tecken."
},
ConfirmPassword: {
equalTo: "Lösenorden stämmer ej överens. Var vänlig kontrollera stavning."
},
Name: {
required: "Skriv i ditt företagsnamn här.",
minlength: "Ditt företag måste innehålla minst 2 tecken."
//textonly: true
},
Street: {
required: "Skriv i företagsadressen här.",
minlength: "Adressen måste innehålla minst 2 tecken."
},
ZipCode: {
required: "Skriv i postnummer här.",
number: "Ditt postnummer får endast innehålla siffror.",
minlength: "Ditt postnummer måste bestå av minst 5 siffror."
},
City: {
required: "Skriv i staden här.",
//textonly: true,
minlength: "Stad måste innehålla minst 2 bokstäver."
},
Country: {
required: "Skriv i landet här.",
//textonly: true,
minlength: "Landet måste innehålla minst 2 bokstäver."
}
},
errorPlacement: function (error, element) {
//Placing error messages in placeholders when empty.
if (element.val() === "") {
element.attr("placeholder", error.text());
}
//Pop toastr for error message when textbox has content.
if(element.val() !== "") {
toastr.options = {
positionClass: 'toast-right-center', //Custom position.
closeButton: "true",
preventDuplicates: "true",
showDuration: "400",
hideDuration: "400",
timeOut: "10000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.error(error.text());
}
}
});
所以，我的最后一个问题是： 为什么这只工作一次，如果它与事件委托有关，我应该绑定什么部分？
更新：
当我调试站点时，会生成一些旧代码，例如行
<div id="loading"><i class="fa fa-4x fa-cog fa-spin"></i></div>
在浏览器中
<div id="loading"><i class="fa fa-4x fa-circle-o-notch fa-spin"></i></div>
这是我之前使用的图标。这可能与我原来的问题有关吗？有问题的 div 位于第三步内。 我注意到当网站运行正常时，正在使用齿轮图标。 我对此完全感到困惑，所以希望有人知道发生了什么。
【问题讨论】：
标签： jquery ajax asp.net-mvc jquery-plugins