Yii-如何启用Ajax表单验证

时间:2020-03-05 15:31:19  来源:igfitidea点击:

表单验证确保表单中的每个字段都已按要求的方式填写。
由于开发人员很清楚表单验证的目的和功能,因此不需要对本主题作进一步的介绍。
在我过去的一个项目中,我曾声称要用AJAX验证表单,我成功地做到了这一点。

我在尝试实现此目的时发现在线引用较少,因此考虑给其他人留下一条路径,以便将其用作引用,应使用以下步骤使用AJAX验证Yii表单。

步骤1:声明beginWidget()

在Yii视图表单中,声明beginWidget,如下所述,

<?php
  $form = $this->beginWidget('CActiveForm', array(
    'id'=>'form',  //form-id
    'enableAjaxValidation'=>true,
    'clientOptions'=>array(
      'validateOnSubmit'=>true,
     ),
 ));
?>

以及具有匹配错误函数的表单元素。

<div class="row">
 <?php echo $form->labelEx($model,'attribute'); ?>
 <?php echo $form->textField($model,'attribute'); ?>
 <?php echo $form->error($model, 'attribute'); ?>
</div>
 
<div class="row">
 <?php echo $form->labelEx($model,'attribute1'); ?>
 <?php echo $form->textField($model,'attribute1'); ?>
 <?php echo $form->error($model, 'attribute1'); ?>
</div>

一旦编写了匹配的错误函数,就可以用下面提到的语法关闭小部件函数。

<?php
  $this->endWidget();
?>

上述步骤将包括jquery.yiiactiveform.js,因此必须有步骤1.

步骤2:生成响应

在controller中,我们需要对Ajax验证请求的响应。
为此,请使用以下代码

if(isset($_POST['ajax'])) {
  if ($_POST['ajax']=='form') {
    echo CActiveForm::validate($model);
  }
  Yii::app()->end();
}

第3步:验证规则

确保模型至少有一个用于该场景的验证规则

public function rules()
{
  return array(
    array('attribute, attribute1', 'required'),
  );
}

第4步Div元素

当我们使用$form->error()时,Yii在form元素后面包含隐藏的div。

<input id="attribute" type="text" name="[attribute]" maxlength="120" size="20">
<div id="attribute_em_" class="errorMessage" style="display:none"></div>

第5步更改Div样式

如果字段有验证错误,Yii会将div样式从none更改为block,并向该字段添加错误消息。
因此,当一个字段在表单验证中失败时,可以在AJAX中看到响应。