Yii ajaxSubmitButton()带有字段验证

时间:2011-06-14 18:58:08

标签: php jquery ajax yii

我正在使用Yii ajaxSubmitButton()来提交表单。此外,我已将'enableAjaxValidation'参数设置为true以验证相应的文本框。

我能做什么:

  1. 当焦点离开时,验证字段,异步。
  2. 异步单击按钮时调用服务器端方法。
  3. 问题是我不知道在单击提交按钮时如何执行字段验证,如果验证了模型,则在客户端执行部分渲染。

    如果我覆盖ajaxSubmitButton中的'success'事件,我会得到部分渲染,但我无法维护模型验证。

    任何帮助?


    修改

    感谢您的回复,

    如果未设置'success'事件,则已设置validateOnSubmit标志并正确验证模型。

    当ajaxSubmitButton是这样的时候:

    <?php echo CHtml::ajaxSubmitButton( 'Send',
                                            CHtml::normalizeUrl(array('site/ajaxIndexSubmit')),
                                            array(
                                            'error'=>'js:function(){
                                                alert(\'error\');
                                            }',
                                            'beforeSend'=>'js:function(){
                                                alert(\'beforeSend\');
                                            }',
                                            'success'=>'js:function(data){
                                                alert(\'success, data from server: \'+data);
                                            }',
                                            'complete'=>'js:function(){
                                                alert(\'complete\');
                                            }',
                                            //'update'=>'#where_to_put_the_response',
                                            )
                                        );
        ?>
    

    警报('success')将打印与模型验证相对应的字符串。一旦我有了这个字符串,必须在客户端调用什么逻辑?

    覆盖“成功”javascript处理程序的原因是从服务器接收部分呈现,与模型验证不同。我想要两件事:验证和部分渲染。

6 个答案:

答案 0 :(得分:13)

嘿,我有同样的问题,并且即使使用aftervalidate,beforevalidate等等也能使它工作。其次我想使用这个coz的扩展我的应用程序已经有很多。 所以我做到了:

编辑:根据Barth的建议,我将这些代码放在这里。

第1步:@你的控制器动作

public function actionMyAction()
    {       
            $model=new User;             
            $this->performAjaxValidation($model);  

            if(isset($_POST['User']))
            {
                    $model->attributes=$_POST['User'];
                    $valid=$model->validate();            
                    if($valid){

                       //do anything here
                         echo CJSON::encode(array(
                              'status'=>'success'
                         ));
                        Yii::app()->end();
                        }
                        else{
                            $error = CActiveForm::validate($model);
                            if($error!='[]')
                                echo $error;
                            Yii::app()->end();
                        }
           }

    }

第2步:@您的观点 您的表单可能如下所示

<?php
$form=$this->beginWidget('CActiveForm', array(
    'id'=>'user-form',
    'enableAjaxValidation'=>true,
    'action'=>$this->createUrl('myController/MyAction'),
    'enableClientValidation'=>true,
 )); ?>
    <div class="errorMessage" id="formResult"></div>
    <div id="AjaxLoader" style="display: none"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/spinner.gif"></img></div>
    <div class="row-user-single">
            <?php echo $form->labelEx($model,'attribute1'); ?>
            <?php echo $form->passwordField($model,'attribute1',array('size'=>60,'maxlength'=>500)); ?>
            <?php echo $form->error($model,'attribute1'); ?>
    </div>

    <div class="row-user-single">
            <?php echo $form->labelEx($model,'attribute2'); ?>
            <?php echo $form->passwordField($model,'attribute2',array('size'=>60,'maxlength'=>500)); ?>
            <?php echo $form->error($model,'attribute2'); ?>
    </div>
    <div class="buttons">

     <?php echo CHtml::ajaxSubmitButton('Save',CHtml::normalizeUrl(array('myController/MyAction','render'=>true)),
             array(
                 'dataType'=>'json',
                 'type'=>'post',
                 'success'=>'function(data) {
                     $("#AjaxLoader").hide();  
                    if(data.status=="success"){
                     $("#formResult").html("form submitted successfully.");
                     $("#user-form")[0].reset();
                    }
                     else{
                    $.each(data, function(key, val) {
                    $("#user-form #"+key+"_em_").text(val);                                                    
                    $("#user-form #"+key+"_em_").show();
                    });
                    }       
                }',                    
                 'beforeSend'=>'function(){                        
                       $("#AjaxLoader").show();
                  }'
                 ),array('id'=>'mybtn','class'=>'class1 class2')); ?>

这对我来说很好 上面写的所有代码都是我的写作风格。您可以根据需要更改它们,但是, 只有两件事需要注意如下: 1. @您的控制器调用模型的验证,如果表单无效,则返回json对象 2. @你的视图打破这个json对象(或遍历它)并在表单的各个元素下显示错误消息。

保持简单:)

你也可以在这里看到我的博客文章: http://www.yiiframework.com/forum/index.php/topic/37075-form-validation-with-ajaxsubmitbutton/

答案 1 :(得分:1)

CActiveForm有一个名为$clientOptions的公共属性。默认情况下,有一个validateOnSubmit选项为false。你需要它是真的。在您看来,它看起来应该是这样的:

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

)); ?>

http://www.yiiframework.com/doc/api/1.1/CActiveForm#clientOptions-detail

答案 2 :(得分:1)

我找到了解决方案。 我的CActive表格

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'gold-value-form',
    'enableAjaxValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
        'afterValidate'=>'js:function(form, data, hasError) {
            if(jQuery.isEmptyObject(data)) {
                alert("ok")
            }
            return false;
        }'
    ),
)); ?>

我的创建动作

public function actionCreate()
{
    $this->layout=false;
    $model=new GoldValue;

    if(isset($_POST['ajax']) && $_POST['ajax']==='gold-value-form')
    {
        if(isset($_POST['GoldValue']))
        {
            $model->attributes=$_POST['GoldValue'];
            if(!$model->save())
                echo CActiveForm::validate($model);
        }
    }
    Yii::app()->end();
}

答案 3 :(得分:0)

我打算尝试在ajaxSubmitButton点击上发送一个不同的值(用$ _GET发布)。测试值,然后在值不存在时运行验证。这对你有用吗?

答案 4 :(得分:0)

答案 5 :(得分:-1)

试试这个:

/*
1) Register the snippet into the HEAD. Be sure that it is linked after jquery.yii.js is linked.

2) Configure your CActiveForm instance like this:
*/

$this->beginWidget('CActiveForm', array(
    ...
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
        'afterValidate'=>'js:$.yii.fix.ajaxSubmit.afterValidate'
    )
    ...
);
/*
3) Configure your CHtml::ajaxSubmitButton instance like this:
*/

echo CHtml::ajaxSubmitButton('Whateverlabel', 'whateverurl', array(
    ...
    'beforeSend'=>'js:$.yii.fix.ajaxSubmit.beforeSend("#YOUR_FORM_ID")'
    ...
);

查看更多http://www.codexamples.com/90/chtml-ajaxsubmitbutton/http://www.codexamples.com/category/chtml-8/