FuelUX向导ajax验证
FuelUX Wizard ajax validation
我的Fuel UX向导有问题。当我按下fuel ux向导上的下一个按钮时,我会发送使用validate_step(步骤)选择的category_id,并用php中的json对象进行响应。
第一步很好,但当我试图读取validate_step(step)函数的结果时,我在控制台上收到了一个错误。
问题就在这里:
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx); // CONSOLE : Validation(1)= undefined
if(vrspx === 'ok'){ ....
vrspx变量返回undinied。
我是fuel ux的,我对jquery有着初级到中级的经验,我不知道这是否是一个好的方法,也不知道如何开始对向导的每一步进行ajax验证。
希望有人能帮我。
提前感谢!
代码:
HTML:
<form name="wizard" id="wizard" class="ajax" method="post" action="http://URLBASE/U_wizard/">
<!-- STEP 1 -->
<div class="step-pane active" id="step1">
<div class="padd-10 button-holder" id="categories_selector">
<br>
<label><input type="radio" id="category_id_1" name="category_id" value="1"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_2" name="category_id" value="2"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_3" name="category_id" value="3"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_4" name="category_id" value="4"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_5" name="category_id" value="5"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_6" name="category_id" value="6"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_7" name="category_id" value="7"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_8" name="category_id" value="8"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_9" name="category_id" value="9"><i class="radio"></i>...</label>
</div>
</div>
<!-- STEP 2 -->
<div class="step-pane" id="step2">This is step 2</div>
<!-- STEP 3 -->
<div class="step-pane" id="step3">This is step 3</div>
</form>
JS:
var wizard = $('#MyWizard');
function validate_step(step){
// Get form method and action url
var that = $('.ajax'),
url = that.attr('action'),
type = that.attr('method');
var data = $('form.ajax').serialize();
// Ajax
$.ajax({
url: url + step,
type: type,
data: data,
dataType: "json",
success: function (response) {
console.log(response);
if(response.status == 'ok'){
// allow change
return 'ok';
}else{
// cancel change
return 'notok';
}
}, // End success
error: function () {
console.log('AJAX Error');
return 'notok';
} // End error
}); // $.ajax
} // End validate_step
wizard.on('change', function(e, data) {
console.log('change');
// STEP 1:
var step = 1;
if(data.step===step && data.direction==='next') {
// Hide button next
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx);
if(vrspx === 'ok'){
// allow change
console.log('allow change');
}else{
// cancel change
console.log('cancel change');
return e.preventDefault();
}
} // End validate step 1
// STEP 2:
}); // End Wizard.on.change
PHP:(此PHP的ajax帖子)
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
switch ($value) {
case $value == '1':
# Validate STEP 1:
$this->log->lwrite('## VALUE 1');
foreach ($_POST as $key => $value) {
$this->log->lwrite('## $_POST['.$key.']'.$value);
}
if (isset($_POST['category_id']))
{
$category = CB_safeSQL($_POST['category_id']);
$msg = array('msg' => 'Valid...','status' => 'ok');
$this->log->lwrite('## CATEGORY SETED TO '.$category);
unset($category);
echo json_encode($msg);
unset($msg);
die();
}
else
{
$msg = array('msg' => 'Invalid ...','status' => 'notok');
echo json_encode($msg);
unset($msg);
$this->log->lwrite('## NO category readed');
}
break;
default:
# DEFAULT
$this->log->lwrite('## DEFAULT VALUE');
break;
}
} // End POST
您看到的问题是,必须立即(同步)做出验证决定,并且不能推迟到AJAX请求完成。其中一种策略是始终使验证失败,然后在验证的ajax回调中处理移动向导步骤。这里有一个开始:
$('#MyWizard').on('stepclick change', function (e, data) {
console.log('step ' + data.step + ' requested');
// Cancel the click to allow
// validate_step to process
e.preventDefault();
// Perform AJAX validation. The AJAX
// callback can call $('#MyWizard').wizard('next')
// or otherwise modify the wizard as appropriate
validate_step(data.step);
});
相关文章:
- JS验证ajax返回的html中的表单数据
- 在FrontEndphp-ajax-jquery中验证reCaptcha-google
- 使用对服务器的Ajax调用验证表单字段—Learning Ajax
- javascript验证和ajax调用同时不起作用
- AJAX HTTP基本身份验证解决方案
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 如何在提交表单时忽略ajax中的验证规则和消息
- 使用javascript验证Ajax组合框
- jQuery验证插件submitHandler Ajax
- jquery通过ajax验证电子邮件,然后再通过ajax提交表单
- AJAX文件上传与PHP验证
- 如果($_SERVER[“REQUEST_METHOD”]=“POST”)条件在ajax调用不同的php文件进行验证和提
- 使用ajax、php和mysql进行表单验证
- 只有在ajax验证成功后才能提交表单
- postmates api的AJAX中的HTTP身份验证失败
- 如何验证 ajax 返回值的 javascript “not null”
- 服务器端表单验证 AJAX,通过比较不同页面上的两个文本框
- 如何验证ajax javascript函数来检查rails中的当前元素id
- 如何验证ajax表单
- Jquery表单验证ajax