目前可以同时实现ajax提交和验证。我使用自定义函数,如:
$('.edit_form').submit(function (e) {
e.preventDefault();
var form = $(this);
var formData = $(this).serialize();
if (form.find('.has-error').length) {
return false;
}
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
data: formData,
success: function (data) {
...
},
error: function () {
alert("Something went wrong");
}
});
});
这里是php端,为了验证我的配置是这样的
$form = ActiveForm::begin([
'id' => "some_form",
'action' => ['user/edit'],
'options' => ['class' => 'edit_form'],
'enableAjaxValidation' => false,
'enableClientValidation' => true,
]); ?>
我确信这不是达到我所需要的最好的方法。特别是这部分,我用来防止在验证错误的情况下提交:
if (form.find('.has-error').length) {
return false;
}
有什么建议吗?如何实现ajax提交和验证正确使用Yii 2的内置设置?
使用beforeSubmit事件代替submit, beforeSubmit只会在表单通过验证后触发。
$('form').on('beforeSubmit', function(e) {
var form = $(this);
var formData = form.serialize();
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
data: formData,
success: function (data) {
...
},
error: function () {
alert("Something went wrong");
}
});
}).on('submit', function(e){
e.preventDefault();
});
你可以使用AjaxSubmitButton
你的表单应该是b
$form = ActiveForm::begin([
'id' => "some_form",
'action' => 'javascript:void(0)',
'options' => ['class' => 'edit_form'],
]);
在这里使用AjaxSubmitButton
AjaxSubmitButton::begin([
'label' => 'Submit',
'id' => 'some_form',
'ajaxOptions' => [
'type' => 'POST',
'url' => yiihelpersUrl::to(['/user/edit']),
'success' => new yiiwebJsExpression(
'function(data){
if(data=="success")
{
}else{
$.each(data, function(key, val) {
$("#"+key).after("<div class="help-block">"+val+"</div>");
$("#"+key).closest(".form-group").addClass("has-error");
});
}
}'
),
],
'options' => ['class' => 'btn btn-success', 'type' => 'submit'],
]);
AjaxSubmitButton::end();
在控制器
public function actionEdit()
{
$model = new User;
if($model->save())
{
$result = 'success';
Yii::$app->response->format = trim(Response::FORMAT_JSON);
return $result;
}else{
$error = yiiwidgetsActiveForm::validate($model);
Yii::$app->response->format = trim(Response::FORMAT_JSON);
return $error;
}
}
这里我找到了一些有趣的javascript端验证技巧
所以,一个javascript提交按钮可以是:$('body').on('click', '#submit', function(e) {
e.preventDefault();
var yiiform = $('#my-form');
$.ajax({
type: yiiform.attr('method'),
url: yiiform.attr('action'),
data: yiiform.serializeArray(),
success: function(data) {
if(data.success == 'true') {
window.location.href = 'http://my.success.page';
} else {
// here there is (maybe) the right way to trigger errors
$.each(data, function(key, val) {
yiiform.yiiActiveForm('updateAttribute', key, [val]);
});
}
}
});
}
引发了:
<?= Button::widget([
'label' => Yii::t('app', 'Submit'),
'options' => [
'id'=>'submit',
'class' => 'btn btn-primary pull-right',
]]);?>
动作控制器会回复:
...
if ($model->load(Yii::$app->request->post())) {
Yii::$app->response->format = Response::FORMAT_JSON;
if($model->save()) {
return ['success'=>'true'];
} else {
return ActiveForm::validate($model);
}
}
...
关于ActiveForm::validate()的详细信息可以在这里找到