如何添加“重置"按钮? JQuery步骤的按钮 [英] How to add a "reset" button to JQuery-steps
问题描述
我没有看到这个问题-尽管我确实阅读了有关类似主题的100个jQuery步骤-似乎没有一个能解决我的问题.
I haven't seen this question asked - though I did read probably 100 jQuery-steps about similar topics - none seemed to solve my issue.
我正在使用jQuery步骤,并希望在第一步完成后添加一个重置"按钮-以防我的用户想要清除表单并重新开始.我希望此按钮在默认的下一个"按钮之后失效.
I'm using jQuery-steps and would like to add a "reset" button after the first step is completed - in case my user wants to clear the form and start over. I would like this button to be incerted after the default "next" button.
这是我当前的脚本,基于默认的基本格式此处 >
This is my current script based on the default basic form here
$(function ()
{
function errorPlacement(error, element)
{
element.before(error);
}
$("#form").validate({
rules: {
zip: {
required: true,
maxlength:5,
minlength:5
},
phone: {
required: true,
minlength: 10,
phoneUS: true
}
}
});
$("#wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
// Allways allow step back to the previous step even if the current step is not valid!
if (currentIndex > newIndex)
{
return false;
}
$("#form").validate().settings.ignore = ":disabled,:hidden";
return $("#form").valid();
},
onFinishing: function (event, currentIndex)
{
$("#form").validate().settings.ignore = ":disabled";
return $("#form").valid();
},
onFinished: function (event, currentIndex)
{
alert("Thank you! Your request has been sumbitted.");
}
});
});
推荐答案
您可以启用并使用cancel
按钮来调用validator.resetForm()
.请参见以下示例:
You could enable and use the cancel
button to call validator.resetForm()
. See the following example:
$(function ()
{
var validator;
$("#wizard").steps({
enableCancelButton: true,
onCanceled: function (event)
{
validator.resetForm();
}
});
validator = $("#form").validate({
rules: {
zip: {
required: true,
maxlength:5,
minlength:5
},
phone: {
required: true,
minlength: 10,
phoneUS: true
}
}
});
});
这篇关于如何添加“重置"按钮? JQuery步骤的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!