Fuelux 向导和 formvalidation.io - ajax
Fuelux wizard and formvalidation.io - an ajax
我目前在使用这两个插件提交 ajax 作品时遇到了一些麻烦，有人知道它应该是什么样子吗？因为现在它在没有 ajax 部分的情况下提交给自己 - 与执行相同的地址。我真的不知道 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');
});
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();
}
});
你的问题是矮人要塞级别的乐趣。尽管如此（或正因为如此？），玩起来还是很愉快。
为了回答您的问题，我使用了文档的以下部分：
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 关注的是在步骤之间移动。 它不知道表单它不改变表单的行为，它不添加表单事件或事件。它唯一关心的是 prev/next 按钮和单击最后一个按钮。就这样。 FormValidation 关注的是表单，但它对它们的影响是温和的：如果它发现输入无效，它会阻止提交事件。如果输入有效 - 它允许提交事件滑动。提交事件会滑到哪里？到表单的默认处理程序。现在，当您了解他们的关注点和事件的移动时，您可以看到将使 Fuel UX、FormValidation 和 Ajax 一起发挥作用的系统。
下面，我提供了一个可以解决您的问题的工作代码。您可以复制它并在本地进行测试 - 它几乎是独立版本。您唯一需要的是 - 稳定的互联网连接 - 它使用来自不同 CDN 的 CSS 和 JS，并将 Ajax 请求发送到 whosebug.com（你可以更改它，使用任何站点 - 但是如果您在本地计算机上使用来自 file:/// 的 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://whosebug.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>
为避免在ajax响应之前更改步骤，应注意一些细节。
首先，JQuery ajax 默认是异步的，在 ajax 向控制器发出请求后，Fuel UX 向导自然不会等待 ajax 响应并执行方法程序，然后为了等待 ajax 响应，它必须使用 ajax 设置“async:false”。
对于使用 Fuel UX 向导及其中的一些方法，例如 on.('change')，我们注意到，当为了避免或继续移动步进时，我们必须 return true 或 false for result object它可以理解移动与否。
在我的示例中，我在 ajax 方法 之后使用了一个变量 return true 或 false 我称之为“stepState”。
请参阅我的示例，它对我有用：
$('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
if (info.step == 1) {
if ($('#ConfirmFirstStepInfo').is(':checked')) {
return true;
}
else {
return false;
}
} else if (info.step == 2) {
if ($('#ConfirmSecondStepInfo').is(':checked')) {
var ourObject = {};
var stepState = null;
$.ajax({
type: 'POST',
data: ourObject,
async: false,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response) {
if (response.Success == true) {
stepState = true;
return true;
}
else {
stepState = false;
return false;
}
},
error: function () {
stepState = false;
return false;
},
failure: function () {
stepState = false;
return false;
}
});
return stepState;
}
else {
return false;
}
} else if (info.step == 3) {
if (!$('#validation-form').valid())
{
return false;
}else{
return true;
}
}
}).on('finished', function (e) {
alert('finished!');
}).on('btn-wizard-next', function (e) {
//return false;//prevent clicking on steps
//e.preventDefault();//this will prevent clicking and selecting steps
});
我目前在使用这两个插件提交 ajax 作品时遇到了一些麻烦，有人知道它应该是什么样子吗？因为现在它在没有 ajax 部分的情况下提交给自己 - 与执行相同的地址。我真的不知道 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');
});
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();
}
});
你的问题是矮人要塞级别的乐趣。尽管如此（或正因为如此？），玩起来还是很愉快。
为了回答您的问题，我使用了文档的以下部分：
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 关注的是在步骤之间移动。 它不知道表单它不改变表单的行为，它不添加表单事件或事件。它唯一关心的是 prev/next 按钮和单击最后一个按钮。就这样。 FormValidation 关注的是表单，但它对它们的影响是温和的：如果它发现输入无效，它会阻止提交事件。如果输入有效 - 它允许提交事件滑动。提交事件会滑到哪里？到表单的默认处理程序。现在，当您了解他们的关注点和事件的移动时，您可以看到将使 Fuel UX、FormValidation 和 Ajax 一起发挥作用的系统。
下面，我提供了一个可以解决您的问题的工作代码。您可以复制它并在本地进行测试 - 它几乎是独立版本。您唯一需要的是 - 稳定的互联网连接 - 它使用来自不同 CDN 的 CSS 和 JS，并将 Ajax 请求发送到 whosebug.com（你可以更改它，使用任何站点 - 但是如果您在本地计算机上使用来自 file:/// 的 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://whosebug.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>
为避免在ajax响应之前更改步骤，应注意一些细节。 首先，JQuery ajax 默认是异步的，在 ajax 向控制器发出请求后，Fuel UX 向导自然不会等待 ajax 响应并执行方法程序，然后为了等待 ajax 响应，它必须使用 ajax 设置“async:false”。 对于使用 Fuel UX 向导及其中的一些方法，例如 on.('change')，我们注意到，当为了避免或继续移动步进时，我们必须 return true 或 false for result object它可以理解移动与否。 在我的示例中，我在 ajax 方法 之后使用了一个变量 return true 或 false 我称之为“stepState”。 请参阅我的示例，它对我有用：
$('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
if (info.step == 1) {
if ($('#ConfirmFirstStepInfo').is(':checked')) {
return true;
}
else {
return false;
}
} else if (info.step == 2) {
if ($('#ConfirmSecondStepInfo').is(':checked')) {
var ourObject = {};
var stepState = null;
$.ajax({
type: 'POST',
data: ourObject,
async: false,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response) {
if (response.Success == true) {
stepState = true;
return true;
}
else {
stepState = false;
return false;
}
},
error: function () {
stepState = false;
return false;
},
failure: function () {
stepState = false;
return false;
}
});
return stepState;
}
else {
return false;
}
} else if (info.step == 3) {
if (!$('#validation-form').valid())
{
return false;
}else{
return true;
}
}
}).on('finished', function (e) {
alert('finished!');
}).on('btn-wizard-next', function (e) {
//return false;//prevent clicking on steps
//e.preventDefault();//this will prevent clicking and selecting steps
});