2

私のコードには、JS を介して追加の機能を実装したフィールド (たとえば、フィールド名はexampleField[] ) があります。各フィールドに Yii2 に必要な Validtorを実装したいと考えています。すでに各バリデータを使用していますが、機能していません。私の yii2 バージョンは 2.0.6 です。ありがとうございます

ここに私のJavaScriptコードがあります

var max_fields = 4; //maximum input boxes allowed
        var wrapper = $(".addAmount"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID
        var html = '';

        var x = <?php echo $count ?>; //initlal text box count

        $(add_button).click(function (e) { //on add input button click

            html = '<div id="multipleRow' + x + '"><div class="fullwidth">';
            html += '<div class="span4"><div class="control-group">';
            html += '<label for="plandetail-planduration" class="control-label">Duration <span class="required">*</span></label>';
            html += '<div class="controls"><div class="form-group field-plandetail-planduration required">';
            html += '<input type="text" name="PlanDetail[planDuration][]" class="form-control" id="plandetail-planduration">';
            html += '<div class="error"></div></div></div></div>';
            html += '</div>';
            html += '<div class="span4"><div class="control-group">';
            html += '<label for="plandetail-plandurationtype" class="control-label">Duration Period<span class="required">*</span></label>';
            html += '<div class="controls"><div class="form-group field-plandetail-plandurationtype">';
            html += '<select name="PlanDetail[planDurationType][]" class="form-control" id="plandetail-plandurationtype">';
            html += '<option value=""></option>';
            html += '<option value="month">Month</option>';
            html += '<option value="year">Year</option>';
            html += '</select>';
            html += '<div class="help-block"></div>';
            html += '</div></div></div></div></div>';
            html += '<div class="fullwidth">';
            html += '<div class="span4"><div class="control-group">';
            html += '<label for="plandetail-planamount" class="control-label">Amount <span class="required">*</span></label>';
            html += '<div class="controls"><div class="form-group field-plandetail-planamount required">';
            html += '<input type="text" name="PlanDetail[planAmount][]" class="form-control" id="plandetail-planamount">';
            html += '<div class="error"></div>';
            html += '</div></div>';
            html += '</div></div>';
            html += '<div class="span4"><div class="control-group">';
            html += '<label for="plandetail-plandiscountamount" class="control-label">Discount Amount <span class="required">*</span></label>';
            html += '<div class="controls"><div class="form-group field-plandetail-plandiscountamount required">';
            html += '<input type="text" name="PlanDetail[planDiscountAmount][]" class="form-control" id="plandetail-plandiscountamount">';
            html += '<div class="error"></div>';
            html += '</div></div>';
            html += '</div></div>';
            html += '<div class="span4"><div class="control-group">';
            html += '<label for="plandetail-plancurrency" class="control-label">Currency <span class="required">*</span></label>';
            html += '<div class="controls"><div class="form-group field-plandetail-plancurrency required">';
            html += '<select name="PlanDetail[planCurrency][]" class="form-control" id="plandetail-plancurrency">';
            html += '<option value=""></option><option value="USD">USD</option><option value="EUR">EUR</option>';
            html += '</select>';
            html += '<div class="help-block"></div>';
            html += '</div></div>';
            html += '</div></div>';
            html += '</div>';
            html += '<div class="col-lg-4"><a href="javascript:void(0)" class="remove_field" id="' + x + '">Remove</a></div>';
            html += '</div></div>';
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append(html); //add input box
            }else{alert('You Can not add more than 4 Amount')}

        });
        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault();
//            alert(this.id);
            $("#multipleRow" + this.id).remove();
            x--;
        });
4

1 に答える 1

0

html入力の を追加するだけjsで、検証を行う がありません。すべての動的フィールドをyiiActiveFormで追加する必要があります。基本的なテンプレートに付属するお問い合わせフォームの例を次に示します。

まず、フォームからフィールド email を削除して、後で次のように追加できるようにしjsます。

<?php // $form->field($model, 'email') ?>

フォームで ajax 検証を使用していることを確認してください。

<?php $form = ActiveForm::begin(['id' => 'contact-form', 'enableAjaxValidation' => true]); ?>

ここで、ビューの最後に次のコードを追加します。

<?php
$js = <<<JS
$( document ).ready(function() {
    var input = '<div class="form-group field-contactform-email required">' +
        '<label class="control-label" for="contactform-email">Email</label>' +
        '<input type="text" id="contactform-email" class="form-control" name="ContactForm[email]">' +
        '<p class="help-block help-block-error"></p>' +
    '</div>';

    $('#contact-form').append(input); // add the html in the form

    $('#contact-form').yiiActiveForm('add', { // add the js rules to the form
        'id': 'contactform-email',
        'name': 'email',
        'container': '.field-contactform-email',
        'input': '#contactform-email',
        'enableAjaxValidation':true
    });
});
JS;

$this->registerJs($js); // insert javascript

最後に、次のようなコントローラーでajax 検証を行う必要があります。

use yii\web\Response;
use yii\widgets\ActiveForm;

class SiteController extends Controller
{
    ...

    public function actionContact()
    {
        $model = new ContactForm();
        if ($model->load(Yii::$app->request->post())) { // load the post
            if (Yii::$app->request->isAjax) { // verify is ajax
                Yii::$app->response->format = Response::FORMAT_JSON; // change the response to json format
                return ActiveForm::validate($model); // return the validation as json
            } elseif ($model->contact(Yii::$app->params['adminEmail'])) {
                Yii::$app->session->setFlash('contactFormSubmitted');

                return $this->refresh();
            }
        }

        return $this->render('contact', [
            'model' => $model,
        ]);
    }
}
于 2016-08-01T14:00:55.173 に答える