Yii2 AJAX 表单未验证

如何解决Yii2 AJAX 表单未验证

我正在将我的网站从 Yii 迁移到 Yii2 并尝试制作一个基本的贷款计算器。正在阅读建议使用 if(dataDeserialized.Count > 0) { var key = "id"; var value = "2"; JArray list = new JArray(); foreach (var d in dataDeserialized) { if ((string)d.id != value.ToString()) { list.Add(d); } } if(list.Count > 0) { var result = JsonConvert.SerializeObject(list); } } 的文档和堆栈上的一些答案。

以下是我迄今为止完成的代码。但我无法让我的表单验证工作。它允许我提交一个空表格。并且没有显示任何错误？

还有我把我的计算放在哪里，在 actionloanValidate() 或 actionIndex() 中？

validationUrl

在我的控制器中我有这个

<?php 
                        $form = ActiveForm::begin([
                            'id' => $model->formName(),'enableAjaxValidation' => true,'validationUrl' => Url::toRoute(['calculator/default/loan-validate'])
                        ]);
                    ?>

                    <?= $form->field($model,'price') ?>

                    <?= $form->field($model,'downpayment') ?>

                    <?= $form->field($model,'rate') ?>

                    <?= $form->field($model,'yearloan')->dropDownList(
                                ['1' => '1 (12 months)','2' => '2 (24 months)'); 
                    ?>

                    <?= Html::submitButton('Submit',['class' => 'btn btn-primary btn-block','tabindex' => '3']) ?>

                    <?php ActiveForm::end(); ?>

                    <script>
                    $(document).ready(function () { 
                        var $form = $("#<?= $model->formName() ?>");
                        $form.on("beforeSubmit",function (event,messages) {
                            event.preventDefault();
                            $.ajax({
                                "type":"POST","url":$form.attr('action'),"data":$form.serialize(),"beforeSend":function( xhr ) {},"dataType":"json","cache": true,"success":function(data){
                                    $("#totalLoanAmount").html(data.totalLoanAmount);
                                    $("#monthlyInstallment").html(data.monthlyInstallment);
                                    $("#loanCalcTable").html(data.loanCalcTable);   
                                },});
                            return false;       
                        });
                    });
                    </script>

我的模型规则是

        public function actionIndex() {
    $model=new calculatorForm;
        if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
            //DO CALCULATION HERE!!
        } 
        return $this->render('loan-calculator',[
                    'model' => $model,]);
        }

public function actionloanValidate()
        {
            $model=new calculatorForm;
            
            if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
                Yii::$app->response->format = Response::FORMAT_JSON;
                return ActiveForm::validate($model);
            }
    
            else {
                return $this->renderAjax('loan-calculator',]);
            }
                
        }

解决方法

您通过在 javascript 中定义 beforeSubmit 来覆盖验证检查。您也可能会收到取消的 ajax 请求，因为您需要在 event.stopPropagation()

之后调用 event.preventDefault()

如果您真的只是想实现必需的验证，请不要使用 ajaxValidation。

在 beforeSubmit 上验证表单

    event.preventDefault();
    event.stopPropagation(); //stops going to submit which will cancel your ajax
    //a trick added to ensure validation is triggered on untouched fields
    data = $form.data("yiiActiveForm");
        $.each(data.attributes,function() {
            this.status = 3;
        });

    $form.yiiActiveForm("validate");

    if ($("#form").find(".has-error").length) {
        return false;
    }
                            $.ajax({
                                "type":"POST","url":$form.attr('action'),"data":$form.serialize(),"beforeSend":function( xhr ) {},"dataType":"json","cache": true,"success":function(data){
                                    $("#totalLoanAmount").html(data.totalLoanAmount);
                                    $("#monthlyInstallment").html(data.monthlyInstallment);
                                    $("#loanCalcTable").html(data.loanCalcTable);   
                                },});
                             

同样，计算应该在actionIndex（表单的动作）中完成