我目前在使用这两个插件进行 ajax 提交工作时遇到了一些麻烦，有人知道它应该是什么样子吗？因为现在它在没有 ajax 部分的情况下提交给 self - 与执行相同的地址。我真的不知道 ajax 部分应该在哪里以及什么会触发 formvalidation.io 提交处理程序 - 因为我猜它应该从 on('success.form.fv')
Formvalidation.io部分
$('#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');
});
燃料油部分
$('#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();
}
});
最佳答案
您的问题是矮人要塞级别的 FUN。尽管如此(或正因为如此？)，玩起来还是很愉快。
为了回答您的问题，我使用了文档的这些部分:
http://getfuelux.com/javascript.html#wizard-usage-methods - 我在这里使用了 .wizard('next')
http://formvalidation.io/examples/ajax-submit/ - 我看到你也找到了那个页面。我检查了使 Ajax 为 FormValidation 工作的建议方法以及它为什么会发痒
http://formvalidation.io/api/#default-submit - 经过几个小时的乐趣，我在文档中找到了这个东西。基本上 - 所说的 - .defaultSubmit 是 Ajax 的禁忌 - 它用于以传统方式提交数据。
http://formvalidation.io/examples/fuel-ux-wizard/ - 我看到你也找到了那个页面。我使用这个代码库来生成一个可测试的环境。 HTML 标记在该示例中是可用的，但作为 Ajax 发送数据与作为普通 HTTP 请求发送数据不同:我们需要更改脚本。
为什么您使用的代码无法正常工作？ Fuel UX 关注的是在步骤之间移动。 它不知道表单 它不会改变表单的行为，它不会添加表单事件或事件。它唯一关心的是上一个/下一个按钮和单击最后一个按钮。就这样。 FormValidation 关注的是表单，但它对它们的影响是温和的:如果它发现输入无效，它会阻止提交事件。如果输入有效 - 它允许提交事件滑动。提交事件会滑到哪里？到表单的默认处理程序。现在，当您了解他们的关注点和事件的移动时，您可以看到将使 Fuel UX、FormValidation 和 Ajax 协同工作的系统。
下面，我提供了一个可以解决您的问题的工作代码。您可以复制它并在本地进行测试 - 它几乎是独立版本。您唯一需要的是 - 稳定的互联网连接 - 它使用来自不同 CDN 的 CSS 和 JS，并将 Ajax 请求发送到 stackoverflow.com(你可以更改它，使用任何站点 - 但如果你使用来自file:///在你的本地机器上)
<!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>
关于javascript - Fuelux 向导和 formvalidation.io - 一个 ajax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35940381/