这是我的基于Bootstrap，Formvalidation和Fuel UX Wizard的表单向导。
<!-- start first form -->
<h2 class="page-header text-center">The First Form Wizard</h2>
<div class="fuelux">
<div class="wizard" id="orderWizard">
<ul class="steps">
<li data-step="1" class="active"><span class="badge">1</span> Add to cart<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span> Shipping address<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button type="button" class="btn btn-default btn-next" data-last="Order">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<form id="orderForm" method="post" class="form-horizontal">
<div class="step-content">
<!-- The first panel -->
<div class="step-pane active" data-step="1">
<div class="form-group">
<label class="col-xs-3 control-label">Quantity</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="quantity" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Size</label>
<div class="col-xs-6">
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="s" /> S</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="m" /> M</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="l" /> L</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="xl" /> XL</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Color</label>
<div class="col-xs-6">
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="white" /> White</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="black" /> Black</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="red" /> Red</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="yellow" /> Yellow</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="green" /> Green</label>
</div>
</div>
</div>
</div>
<!-- The second panel -->
<div class="step-pane" data-step="2">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cellPhone" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Street</label>
<div class="col-xs-9">
<input type="text" class="form-control" name="street" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">City</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="city" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Zipcode</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="zipCode" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" id="thankModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Thank you</h4>
</div>
<div class="modal-body">
<p class="text-center">Thank you for your order</p>
</div>
</div>
</div>
</div>
<!-- start second form -->
<h2 class="page-header text-center">The Second Form Wizard</h2>
<div class="fuelux">
<div class="wizard" id="orderWizard">
<ul class="steps">
<li data-step="1" class="active"><span class="badge">1</span> Add to cart<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span> Shipping address<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button type="button" class="btn btn-default btn-next" data-last="Order">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<form id="orderForm" method="post" class="form-horizontal">
<div class="step-content">
<!-- The first panel -->
<div class="step-pane active" data-step="1">
<div class="form-group">
<label class="col-xs-3 control-label">Quantity</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="quantity" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Size</label>
<div class="col-xs-6">
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="s" /> S</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="m" /> M</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="l" /> L</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="xl" /> XL</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Color</label>
<div class="col-xs-6">
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="white" /> White</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="black" /> Black</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="red" /> Red</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="yellow" /> Yellow</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="color[]" value="green" /> Green</label>
</div>
</div>
</div>
</div>
<!-- The second panel -->
<div class="step-pane" data-step="2">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cellPhone" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Street</label>
<div class="col-xs-9">
<input type="text" class="form-control" name="street" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">City</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="city" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Zipcode</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="zipCode" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" id="thankModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Thank you</h4>
</div>
<div class="modal-body">
<p class="text-center">Thank you for your order</p>
</div>
</div>
</div>
</div>
这个Java
$(document).ready(function() {
$('#orderForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// This option will not ignore invisible fields which belong to inactive panels
excluded: ':disabled',
fields: {
quantity: {
validators: {
notEmpty: {
message: 'The quantity is required'
},
greaterThan: {
value: 1,
message: 'The quantity must be greater than 0'
},
integer: {
message: 'The quantity must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
'color[]': {
validators: {
notEmpty: {
message: 'The color is required'
}
}
},
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
phone: {
country: 'US',
message: 'The value is not valid US phone number'
}
}
},
street: {
validators: {
notEmpty: {
message: 'The street is required'
}
}
},
city: {
validators: {
notEmpty: {
message: 'The city is required'
}
}
},
zipCode: {
validators: {
notEmpty: {
message: 'The zip code is required'
},
zipCode: {
country: 'US',
message: 'The value is not valid US zip code'
}
}
}
}
});
$('#orderWizard')
// Call the wizard plugin
.wizard()
// Triggered when clicking the Next/Prev buttons
.on('actionclicked.fu.wizard', function(e, data) {
var fv = $('#orderForm').data('formValidation'), // FormValidation instance
step = data.step, // Current step
// The current step container
$container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');
// Validate the container
fv.validateContainer($container);
var isValidStep = fv.isValidContainer($container);
if (isValidStep === false || isValidStep === null) {
// Do not jump to the target panel
e.preventDefault();
}
})
// Triggered when clicking the Complete button
.on('finished.fu.wizard', function(e) {
var fv = $('#orderForm').data('formValidation'),
step = $('#orderWizard').wizard('selectedItem').step,
$container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');
// Validate the last step container
fv.validateContainer($container);
var isValidStep = fv.isValidContainer($container);
if (isValidStep === true) {
// Uncomment the following line to submit the form using the defaultSubmit() method
// fv.defaultSubmit();
// For testing purpose
$('#thankModal').modal();
}
});
});
$(document).ready(function() {
$('#orderWizard')
.on('changed.fu.wizard', function(e, data) {
var $body = $('body'),
$iframe = $body.data('iframe.fv');
if ($iframe) {
// Adjust the height of iframe
$iframe.height($body.height());
}
});
});
http://jsfiddle.net/q4f0ogud/1/
此表单向导工作正常，但在同一页面中添加两次或更多时，第一个工作，第二个不工作。
这个问题有什么解决方案吗？
我尝试用#orderForm替换java中的所有.form-horizontal，两种表单都有效，但填写第一个表单并单击下一个按钮时，第二个表单阻止我因为字段为空。
我希望每个表单都能独立工作。
谢谢，我希望清楚。
答案 0 :(得分：0)
您需要为每个表单向导（ids always need to be unique on html）添加不同的ID，并单独初始化每个向导，即(#id).wizard()需要发生两次，每个不同的ID一个。