逐步引导表单，但是submit方法不起作用。它与jquery链接，但是如果我删除ID，则继续按钮不起作用。我可以使用路由提交来执行操作，并且不需要jquery验证，我只需要继续，后退按钮和提交按钮，只有在最后一个阶段才可见。
<div class="portlet-body form">
<form class="form-horizontal" name action="{{route('meetingStore')}}" id="submit_form" method="POST">
<div class="form-wizard">
<div class="form-body">
<ul class="nav nav-pills nav-justified steps">
<li>
<a href="#tab1" data-toggle="tab" class="step">
<span class="number"> 1 </span>
<span class="desc">
<i class="fa fa-check"></i> Visitor Info </span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" class="step">
<span class="number"> 2 </span>
<span class="desc">
<i class="fa fa-check"></i> Host </span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" class="step active">
<span class="number"> 3 </span>
<span class="desc">
<i class="fa fa-check"></i> Date & Location </span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" class="step">
<span class="number"> 4 </span>
<span class="desc">
<i class="fa fa-check"></i> Confirm </span>
</a>
</li>
</ul>
<div id="bar" class="progress progress-striped" role="progressbar">
<div class="progress-bar progress-bar-success"> </div>
</div>
<div class="tab-content">
<div class="alert alert-danger display-none">
<button class="close" data-dismiss="alert"></button> You have some form errors. Please check below. </div>
<div class="alert alert-success display-none">
<button class="close" data-dismiss="alert"></button> Your form validation is successful! </div>
<div class="tab-pane active" id="tab1">
<h3 class="block">Provide your Visitor details</h3>
<div class="form-group">
<label class="control-label col-md-3">New Visitor
<span class="required"> * </span>
</label>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg yellow" data-toggle="modal" data-target="#Visitormdl" style="margin-bottom: 6px;">New Visitor
<i class="fa fa-plus add_button_glyph pull-left" style="padding: 7px;"></i>
</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Select Visitor</label>
<div class="col-md-4">
<select name="visitorName" id="country_list" class="form-control">
@foreach($visitors as $v)
<option value=""></option>
<option value="{{$v->name}}">{{$v->name}}<br>{{$v->mobile}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Purpose</label>
<div class="col-md-4">
<textarea class="form-control" rows="3" name="purpose"></textarea>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<h3 class="block">Provide your profile details</h3>
<div class="form-group">
<label class="control-label col-md-3">Select Host</label>
<div class="col-md-4">
<select name="hostName" id="country_list" class="form-control">
<option value=""></option>
@foreach($hosts as $host)
<option value="{{$host->name}}">{{$host->name}} <br>{{$host->Mobile}}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<h3 class="block">Provide your billing and credit card details</h3>
<div class="form-group">
<label class="control-label col-md-3">Select Location</label>
<div class="col-md-4">
<select name="location" id="country_list" class="form-control">
<option value=""></option>
@foreach($locations as $lo)
<option value="{{$lo->name}}">{{$lo->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Start Date & Time
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input id="" type="datetime-local" name="startDate" value="2017-06-01T08:30">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">End Date & Time
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input id="" type="datetime-local" name="endDate" value="2017-06-01T08:30">
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<h3 class="block">Confirm your data</h3>
<h4 class="form-section">Visitor Info</h4>
<div class="form-group">
<label class="control-label col-md-3">Visitor Name:</label>
<div class="col-md-4">
<p class="form-control-static" data-display="visitorName"> </p>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Purpose:</label>
<div class="col-md-4">
<p class="form-control-static" data-display="purpose"> </p>
</div>
</div>
<h4 class="form-section">Host</h4>
<div class="form-group">
<label class="control-label col-md-3"> Host Name:</label>
<div class="col-md-4">
<p class="form-control-static" data-display="hostName"> </p>
</div>
</div>
<h4 class="form-section">Date, time & Location</h4>
<div class="form-group">
<label class="control-label col-md-3">Start Date & Time:</label>
<div class="col-md-4">
<p class="form-control-static" data-display="startDate"> </p>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">End Date & Time:</label>
<div class="col-md-4">
<p class="form-control-static" data-display="endDate"> </p>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions" method="POST">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<a href="javascript:;" class="btn default button-previous">
<i class="fa fa-angle-left"></i> Back </a>
<a href="javascript:;" class="btn btn-outline green button-next"> Continue
<i class="fa fa-angle-right"></i>
</a>
<button type="submit" onclick="{{(route('meetingStore'))}}" class="btn green button-submit">Submit</button>
<i class="fa fa-check"></i>
</div>
</div>
</div>
</div>
</form>
jquery：
var FormWizard = function() {
return {
init: function() {
function e(e) {
return e.id ? "<img class='flag' src='../../assets/global/img/flags/" + e.id.toLowerCase() + ".png'/> " + e.text : e.text
}
if (jQuery().bootstrapWizard) {
$("#country_list").select2({
placeholder: "Select",
allowClear: !0,
formatResult: e,
width: "auto",
formatSelection: e,
escapeMarkup: function(e) {
return e
}
});
var r = $("#submit_form"),
t = $(".alert-danger", r),
i = $(".alert-success", r);
r.validate({
doNotHideMessage: !0,
errorElement: "span",
errorClass: "help-block help-block-error",
focusInvalid: !1,
rules: {
username: {
minlength: 5,
required: !0
},
password: {
minlength: 5,
required: !0
},
rpassword: {
minlength: 5,
required: !0,
equalTo: "#submit_form_password"
},
fullname: {
required: !0
},
email: {
required: !0,
email: !0
},
phone: {
required: !0
},
gender: {
required: !0
},
address: {
required: !0
},
city: {
required: !0
},
country: {
required: !0
},
card_name: {
required: !0
},
card_number: {
minlength: 16,
maxlength: 16,
required: !0
},
card_cvc: {
digits: !0,
required: !0,
minlength: 3,
maxlength: 4
},
card_expiry_date: {
required: !0
},
"payment[]": {
required: !0,
minlength: 1
}
},
messages: {
"payment[]": {
required: "Please select at least one option",
minlength: jQuery.validator.format("Please select at least one option")
}
},
errorPlacement: function(e, r) {
"gender" == r.attr("name") ?
e.insertAfter("#form_gender_error") : "payment[]" == r.attr("name") ?
e.insertAfter("#form_payment_error") : e.insertAfter(r)
},
invalidHandler: function(e, r) {
i.hide(), t.show(), App.scrollTo(t, -200)
},
highlight: function(e) {
$(e).closest(".form-group").removeClass("has-success").addClass("has-error")
},
unhighlight: function(e) {
$(e).closest(".form-group").removeClass("has-error")
},
success: function(e) {
"gender" == e.attr("for") || "payment[]" == e.attr("for") ?
(e.closest(".form-group").removeClass("has-error").addClass("has-success"), e.remove()) : e.addClass("valid").closest(".form-group").removeClass("has-error").addClass("has-success")
},
submitHandler: function(e) {
i.show(), t.hide(), e[0].submit()
}
});
var a = function() {
$("#tab4 .form-control-static", r).each(function() {
var e = $('[name="' + $(this).attr("data-display") + '"]', r);
if (e.is(":radio") && (e = $('[name="' + $(this).attr("data-display") + '"]:checked', r)),
e.is(":text") || e.is("textarea")) $(this).html(e.val());
else if (e.is("select")) $(this).html(e.find("option:selected").text());
else if (e.is(":radio") && e.is(":checked")) $(this).html(e.attr("data-title"));
else if ("payment[]" == $(this).attr("data-display")) {
var t = [];
$('[name="payment[]"]:checked', r).each(function() {
t.push($(this).attr("data-title"))
}), $(this).html(t.join("<br>"))
}
})
},
o = function(e, r, t) {
var i = r.find("li").length,
o = t + 1;
$(".step-title", $("#form_wizard_1")).text("Step " + (t + 1) + " of " + i), jQuery("li", $("#form_wizard_1")).removeClass("done");
for (var n = r.find("li"), s = 0; t > s; s++) jQuery(n[s]).addClass("done");
1 == o ? $("#form_wizard_1").find(".button-previous").hide() : $("#form_wizard_1").find(".button-previous").show(), o >= i ? ($("#form_wizard_1").find(".button-next").hide(), $("#form_wizard_1").find(".button-submit").show(), a()) : ($("#form_wizard_1").find(".button-next").show(), $("#form_wizard_1").find(".button-submit").hide()), App.scrollTo($(".page-title"))
};
$("#form_wizard_1").bootstrapWizard({
nextSelector: ".button-next",
previousSelector: ".button-previous",
onTabClick: function(e, r, t, i) {
return !1
},
onNext: function(e, a, n) {
return i.hide(), t.hide(), 0 == r.valid() ? !1 : void o(e, a, n)
},
onPrevious: function(e, r, a) {
i.hide(), t.hide(), o(e, r, a)
},
onTabShow: function(e, r, t) {
var i = r.find("li").length,
a = t + 1,
o = a / i * 100;
$("#form_wizard_1").find(".progress-bar").css({
width: o + "%"
})
}
}), $("#form_wizard_1").find(".button-previous").hide(),
$("#form_wizard_1 .button-submit").click(function() {
alert("Finished! Hope you like it :)")
}).hide(),
$("#country_list", r).change(function() {
r.validate().element($(this))
})
}
}
}
}（）;
功能
答案 0 :(得分：0)
您错过了{{csrf_field（）}}。试试这个，也许会起作用。
<div class="portlet-body form">
<form class="form-horizontal" action="{{route('meetingStore')}}" id="submit_form" method="POST">
{{csrf_field()}} <!-- beginning of the form -->
<div class="form-wizard">
<!-- your code -->
</div>
</form>