对 ajax 表单发布的 yii 验证

Question

我正在尝试使用 Yii 制作一个 ajax 计算器。我知道我可以使用 javascript，但由于我是 Yii 新手，我想了解它是如何工作的。

这是我认为的代码

$form = $this->beginWidget('CActiveForm', array(
        'id'=>'loan-calculator-form', 
        'enableAjaxValidation'=>false, // thisturns off AJAX validation 
        'enableClientValidation'=>true,
        'clientOptions'=>array( 
                'validateOnSubmit'=>true,
                'validateOnChange'=>true, 
        ), 
)); ?>


<div class="row">
    <?php echo $form->errorSummary($model); ?>
    <div class="col-md-6">
        <div class="form-body">
            <div class="form-group">
                <?php echo $form->labelEx($model,'price'); ?>
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">RM</span>
                    <?php echo $form->textField($model,'price',array('class' => 'form-control')); ?>
                </div>
                <?php echo $form->error($model,'price'); ?>
            </div>
            <div class="form-group">
                <?php echo $form->labelEx($model,'downpayment'); ?>
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">RM</span>
                    <?php echo $form->textField($model,'downpayment',array('class' => 'form-control')); ?>
                </div>
                <?php echo $form->error($model,'downpayment'); ?>
            </div>
            <div class="form-group">
                <?php echo $form->labelEx($model,'rate'); ?>
                <div class="input-group input-group-lg">
                    <?php echo $form->textField($model,'rate',array('class' => 'form-control')); ?>

                    <span class="input-group-addon">%</span>
                </div>
                <?php echo $form->error($model,'rate'); ?>
            </div>

        </div>
        <?php echo $form->error($model,'yearloan'); ?>
    </div>
</div>
<div class="form-footer">


    <?php echo CHtml::submitButton("Calculate", 
            array('buttonType'=>'submit', 'class' => 'btn btn-lg btn-warning btn-block',
                                                                 'onclick'=>"calcLoan();"
                                                                 )
    );
    ?>

    <script type="text/javascript">
        function calcLoan()
        {
            <?php echo CHtml::ajax(array(
                'url'=>array('/loan-calculator'),
                'data'=> "js:$(this).serialize()",
                'type'=>'post',
                'dataType'=>'json',
                'cache' => true, 
                'success'=>"function(data)
                    {
                        $('#totalLoanAmount').html(data.totalLoanAmount);
                        $('#monthlyInstallment').html(data.monthlyInstallment);
                        $('#loanCalcTable').html(data.loanCalcTable);
                    } ",
            ));
            ?>
            return false; 

        }
    </script>

在我的模型中，我确实添加了适当的规则，例如“必需”

但是当我在我的表单上按提交时，错误客户端错误检查工作。如果表单是有效的，表单将发布并且 onlick 也将执行。我不想张贴表格。我想使用 ajax 帖子。

当我设置enableAjaxValidation'=>true, 'enableClientValidation'=>true, without the 'clientOptions' array 并提交表单时。当出现错误时，ajax 帖子仍然会发生。它返回这个 json

{"CalculatorsForm_price":["Car Purchase Price cannot be blank."],"CalculatorsForm_downpayment":["Down Payment cannot be blank."],"CalculatorsForm_rate":["Interest Rate cannot be blank."]}

只有在表单有效的情况下我才会发布 ajax 帖子吗？

Answer 1

使用下面的代码代替CHtml::submitButton() -

<?php
echo CHtml::ajaxSubmitButton(
    'Continue',
    CHtml::normalizeUrl(array('/loan-calculator')),
    array(
        'type'=>'post',
        'dataType'=>'json',
        'success'=>'js:function(data){
             if(data.status == "success") {
                  [.....]
             } else {
                  $.each(data, function(key, val) {
                       if(document.getElementById(key+"_em_"))
                            document.getElementById(key+"_em_").innerHTML = val;
                       $("#loan-calculator-form #"+key+"_em_").show();
                  });
             }
        }'
    ),
    array(
         'name'=>'submit',
         'class'=>'btn btn-lg btn-warning btn-block'
    )
);
?>

请进行相应的更改。

希望对你有帮助。

Answer 2

使用afterValidate 属性

    <?php 
    $form=$this->beginWidget('CActiveForm', array
    (
        'id'=>'loan-calculator-form',
        'enableAjaxValidation' => true,
        'enableClientValidation'=>true,
        'clientOptions'=>array
        (
            'validateOnSubmit'=>true,
            'afterValidate'=>'js:function(form,data,hasError)
            {
                if(!hasError)
                {
                    $.ajax
                    ({
                            "type":"POST",
                            "url":"'.CHtml::normalizeUrl(array("controller/action")).'",
                            "data":form.serialize(),
                            "success":function(data){},                                        
                     });
                 }
              }'
        ),
    )); 
    ?>

    ........
    Your form fields
    ......

    <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>

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