0

我正在创建一个启用了 ClientValidation 的 CActiveForm，但是当我将 RadioButtonList 包装在 UL 容器中时出现错误。

每当我提交表单时，我都会收到“字段不能为空”的消息，即使检查了收音机。

我的表格：

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

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

我使用的 RadioButtonList 之一：

<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没有设置在span中，或在复选框/收音机本身中（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 时，再次生成类成功。

** 生成的 HTML 没有 inputContainer 选项，也没有 radioButtonList 中的最后一个数组：

<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 生成了一个奇怪的跨度来控制表单是否有效，通过向它应用“成功”类。如果我使用 inputContainer UL 那么这个 class="success" 不会生成（使用我的解决方法它会生成并且可以工作）。

4

0 回答 0