0

ClientValidation を有効にして CActiveForm を作成していましたが、UL コンテナー内に RadioButtonList をラップしたときにエラーが発生しました。

無線がチェックされていても、フォームを送信するたびに「フィールドを空にすることはできません」というメッセージが表示されます。

私のフォーム：

$form=$this->beginWidget('CActiveForm', array(
 'id'=>'enrollment-form',
 'enableClientValidation'=>true,

 'clientOptions'=>array(
     'inputContainer'=>'ul',
     'validateOnSubmit'=>true,
 ),
));

そして、私が使用する RadioButtonLists の 1 つ:

<div id="drinks">
  <?php echo $form->label($model,'drink_id',array('class' => 'title')); ?>                
  <?php echo $form->radioButtonList($model,'drink_id', CHtml::listData($drinks, 'id', 'name'), array('container'=>'ul', 'template' => '<li class="radio_row">{input}{label}</li>','separator' => '')); ?>                
  <?php echo $form->error($model,'drink_id'); ?>
</div>

私は何か間違ったことをしていましたか？

jquery.yiiactiveform.js のコードを調べたところ、入力の値を取得する関数で、入力を識別するために使用される ID がスパンに設定されていなかったため、値が正しく取得されないことが問題であることがわかりました。 、またはチェックボックス/ラジオ自体で（IDは私が定義したULコンテナに設定されました）：

var getAFValue = function (o) {
    var type,
        c = [];
    if (!o.length) {
        return undefined;
    }
    if (o[0].tagName.toLowerCase() === 'span') {
        o.find(':checked').each(function () {
            c.push(this.value);
        });
        return c.join(',');
    }
    type = o.attr('type');
    if (type === 'checkbox' || type === 'radio') {
        return o.filter(':checked').val();
    } else {
        return o.val();
    }
};

だから私はこれを追加して解決しました|| o[0].tagName.toLowerCase() === 'ul' :

var getAFValue = function (o) {
    var type,
        c = [];
    if (!o.length) {
        return undefined;
    }
    if (o[0].tagName.toLowerCase() === 'span' || o[0].tagName.toLowerCase() === 'ul') {
        o.find(':checked').each(function () {
            c.push(this.value);
        });
        return c.join(',');
    }
    type = o.attr('type');
    if (type === 'checkbox' || type === 'radio') {
        return o.filter(':checked').val();
    } else {
        return o.val();
    }
};

多分私は間違いを犯しただけで、この解決策はただのくだらない回避策です...しかし、これは単なるバグでしょう？

生成された HTML:

<form id="enrollment-form" action="/enrollment" method="post">
  <div style="display:none"><input type="hidden" value="b06e1d1d796f838f30ba130f8d990034aa9fdad6" name="YII_CSRF_TOKEN" /></div>    
  <div id="enrollment-form_es_" class="errorSummary" style="display:none"><p>Please fix the following input errors:</p>
    <ul><li>dummy</li></ul>
  </div>

  <div id="drinks">
    <label class="title" for="EnrollmentForm_drink_id">Drinks</label>                
    <input id="ytEnrollmentForm_drink_id" type="hidden" value="" name="EnrollmentForm[drink_id]" />

    <ul id="EnrollmentForm_drink_id">
      <li class="radio_row">
        <input id="EnrollmentForm_drink_id_0" value="2" type="radio" name="EnrollmentForm[drink_id]" />
        <label for="EnrollmentForm_drink_id_0">Tea</label>
      </li>
      <li class="radio_row">
        <input id="EnrollmentForm_drink_id_1" value="1" type="radio" name="EnrollmentForm[drink_id]" />
        <label for="EnrollmentForm_drink_id_1">Juice</label>
      </li>
    </ul>                
    <div class="errorMessage" id="EnrollmentForm_drink_id_em_" style="display:none"></div>
  </div>

RadioButtonList を生成するときにコンテナーを使用しなかった場合、Yii は "class=success" をスパンに適用することに気付きました。私の UL コンテナーでは、そのクラスは生成されません。Javascript を変更すると、クラスの成功が再び生成されます。

** inputContainer オプションと radioButtonList の最後の配列なしで生成された HTML:

<div id="drinks">
  <label class="title" for="EnrollmentForm_drink_id">Bebidas</label>                
  <input id="ytEnrollmentForm_drink_id" type="hidden" value="" name="EnrollmentForm[drink_id]">

  <span id="EnrollmentForm_drink_id">
    <input id="EnrollmentForm_drink_id_0" value="2" type="radio" name="EnrollmentForm[drink_id]"> <label for="EnrollmentForm_drink_id_0">Tea</label><br>
    <input id="EnrollmentForm_drink_id_1" value="1" type="radio" name="EnrollmentForm[drink_id]"> <label for="EnrollmentForm_drink_id_1">Juice</label>
  </span>                
 <div class="errorMessage" id="EnrollmentForm_drink_id_em_" style="display:none"></div>            
</div>

ご覧のとおり、Yii はフォームにクラス「success」を適用することによって、フォームが有効かどうかを制御する奇妙なスパンを生成します。inputContainer UL を使用すると、この class="success" は生成されません (私の回避策では生成され、機能します)。

4

0 に答える 0