Jquery ajax表单post的yii验证

我正在尝试使用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>

在我的模型中，我添加了适当的规则，如required

但当我在表单上按submit时，错误客户端错误检查工作正常。如果表单有效，表单将发布，onlick也将执行。我不想把表格寄出去。我想使用ajax帖子

当我设置enableAjaxValidation'=>true，'enableClientValidation'=>true，而不使用'clientOptions'数组时，我提交表单。当出现错误时，ajax post仍然会发生。它返回这个json

{CalculatorsForm_价格：[购车价格不能为空。]，CalculatorsForm_首付款：[首付款不能为空。]，CalculatorsForm_利率：[利率不能为空。]}

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

使用以下代码代替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'
    )
);
?>

请做相应的修改

我希望它有帮助。

使用afterValidate属性

---

通过使用ajaxSubmitButton，模型中的规则不起作用。ajax帖子无论如何都会出现，您是否只尝试过-'enableAjaxValidation'=>true，'enableClientValidation'=>true，而没有使用'clientOptions'数组？是的。通过这样做。ajax帖子仍然存在。但是它返回json{CalculatorsForm_price:[购车价格不能为空]、CalculatorsForm_首付：[首付不能为空]、CalculatorsForm_利率：[利率不能为空。]}如果表单有错误，是否可以不发布ajax帖子？1。无论是否使用ajax，发布总是会发生的。这是关于在发布后显示错误的。2.在普通post中，页面将重新加载并在表单顶部或相关元素旁边显示错误。3.我已经编辑了为ajax post发布错误消息的答案。这仍然会发布表单，即使在没有错误消息的空字段上也是如此。当我填写表格的时候，它也会贴出来。根本没有ajax

    <?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(); ?>