我目前在使用这两个插件获取ajax提交工作时遇到了一些麻烦，有没有人知道应该怎么看？因为现在它提交没有ajax部分自我 - 与执行相同的地址。我真的不知道ajax部分应该在哪里以及什么会触发formvalidation.io提交处理程序 - 因为我猜它应该从on（'success.form.fv'）调用
Formvalidation.io part
$('#orderForm').find('input[name="radioclient"]')
.on('ifChanged', function(e) {
// some conditionall validation
})
.end()
.formValidation({
... options ...
}).on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
console.log('called');
});
Fuelux部分
$('#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
console.log(isValidStep);
console.log(data);
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();
// Use Ajax to submit form data
// $("#loadersp").html('<center><img src="<?PHP echo base_url();?>assets/images/load.gif" alt="Czekaj" /></center>');
// $.ajax({
// type: "POST",
// url: "<?php echo site_url('Zlecenia/dodaj_zgloszenie'); ?>",
// data: new FormData(this),
// dataType: 'json',
// cache: false,
// }).success(function(response) {
// If there is error returned from server
// if (response.result === 'error') {
// $("#ajax_r").html('<div class="col-md-12"><div class="note note-danger"><h4 class="box-heading">Niepowodzenie</h4><p>'+response.msg+'</p></div></div>');
// $("html, body").animate({ scrollTop: 0 }, "slow");
// } else {
// $("#ajax_r").html('<div class="col-md-12"><div class="note note-success"><h4 class="box-heading">Powodzenie</h4><p>'+response+'</p></div></div>');
// $("html, body").animate({ scrollTop: 0 }, "slow");
// $('#nowyKlient').formValidation('resetForm', true);
// $("#nowyKlient").trigger('reset');
// }
// });
e.preventDefault();
// For testing purpose
// $('#thankModal').modal();
}
});
答案 0 :(得分：6)
你的问题是Dwarf Fortress级别的FUN。尽管如此（或者因为它？），玩起来很愉快。
为了回答你的问题，我使用了文档的这些部分：
http://getfuelux.com/javascript.html#wizard-usage-methods - 我从这里使用了.wizard（＆＃39; next＆＃39;）
http://formvalidation.io/examples/ajax-submit/ - 我看到你也发现了那个页面。我研究了为FormValidation使Ajax工作的建议方法以及为什么它会发痒
http://formvalidation.io/api/#default-submit - 经过几个小时的乐趣，我在文档中找到了这个东西。基本上 - 说的是什么 - .defaultSubmit是Ajax的禁忌 - 它用于以传统方式提交数据。
http://formvalidation.io/examples/fuel-ux-wizard/ - 我看到你也发现了那个页面。我使用此代码库来生成可测试的环境。 HTML标记在该示例中是可用的，但是作为Ajax发送数据不同于像普通HTTP请求一样发送数据：我们需要更改脚本。
为什么您使用的代码无法正常工作？燃料用户体验的关注点 - 关于在步骤之间移动。 它不知道表单它不会改变表单的行为，它不会添加表单事件或事件。它唯一关心的是 - 上一个/下一个按钮，然后单击最后一个按钮。这就是全部。 FormValidation的关注点 - 是表单 - 但它会轻轻地影响它们：如果它可以看到输入无效，它会阻止提交事件。如果输入有效 - 它允许提交事件滑动。提交活动在哪里滑倒？到表单的默认处理程序。现在，当您了解他们的关注点和事件的移动时，您可以看到将使Fuel UX，FormValidation和Ajax一起运行的系统。
下面，我提供一个解决您问题的工作代码。您可以在本地复制和测试 - 它几乎是独立版本。只有您需要的东西 - 稳定的互联网连接 - 它使用来自不同CDN的CSS和JS，它将Ajax请求发送到stackoverflow.com（您可以更改它，使用任何网站 - 但如果您使用它将无法工作来自本地计算机上的文件：///的URL
<!DOCTYPE html>
<html>
<head>
<title>Test - teaching FormValidation, Fuel FX and AJAX play together</title>
<!-- Styles - Bootstrap, FormValidation, Fuel UX -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<link rel="stylesheet" href="http://www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css">
<!-- Scripts - jQuery, Bootstrap, FormValidation, Fuel UX -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<div class="fuelux">
<div class="wizard" id="orderWizard">
<ul class="steps">
<li data-step="1" class="active"><span class="badge">1</span> Your first step<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span> Your second step<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" action="http://stackoverflow.com">
<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">Text-1</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="textA" />
</div>
</div>
</div>
<!-- The second panel -->
<div class="step-pane" data-step="2">
<div class="form-group">
<label class="col-xs-3 control-label">Text-2</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="textB" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(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: {
textA: {
validators: {
notEmpty: {
message: 'The textA is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The textA can only consist of alphabetical and space'
}
}
},
textB: {
validators: {
notEmpty: {
message: 'The textB is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The textB can only consist of alphabetical and space'
}
}
}
}
})
.on('submit', function() {
// make your form play with Fuel UX
$('#orderWizard').wizard('next');
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
});
$('#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 +'"]');
if (data.direction === 'previous') {
// Do nothing if you're going to the previous step
return;
}
// 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) {
// your Fuel UX wizard mustn't fire
// fv.defaultSubmit(); - because what it means
// is trigger raw form.submit() -
// this function it is designed
// to send form in a normal way - no validation,
// just a standard 'post' or 'get'
//
// but you want ajax - so that means that
// normal submit is a no-no for you
var $form = $('#orderForm');
// For testing purpose
alert('We started to send your Ajax request');
// Use Ajax to submit form data
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: $form.serialize(),
success: function(result) {
// ... Process the result ...
// For testing purpose
alert('Your Ajax request was successful!');
},
error: function(result) {
// ... Process the result ...
// For testing purpose
alert('Unfortunately your Ajax request failed');
}
});
}
});
});
</script>
</body>
</html>