如何动态制作ParsleyJS所需的字段?

时间:2014-04-07 22:33:22

标签: javascript jquery validation twitter-bootstrap parsley.js

我使用Parsley 2.0.4-rc4进行表单验证。我有一个默认隐藏的选择字段(在CSS中设置为display: none;),但如果另一个无线电字段设置为"是",则该值不再隐藏并变为必需。

我有一个隐藏字段的自定义验证器,但是当字段为空时,验证器不会被调用。

事情变得更加复杂,因为我使用bootstrap-multiselect作为隐藏的选择字段,所以我想知道所需的multiple属性是否干扰了Parsley的DOM API。

现在发生的事情是,即使字段在我更改其值时得到验证,当字段为空并且调用parsley().validate()时,也不会进行验证,并且不显示该字段所需的错误消息。当从属字段设置为"否"时,该字段是正确可选的。我还可以确认在字段值更改时调用验证器。

我想要发生的是,当依赖字段被设置为"是"时,该字段警告用户该字段是必需的。并且选择字段留空。

我使用了here提到的方法,但是我希望每次更改字段的可见性时都找到一种不会破坏表单的方法。< / p>

这是隐藏的表单字段:

<select id="completed-grades" class="multiselect" multiple="multiple"
        data-parsley-completedgrades
        data-parsley-trigger="change"
        data-parsley-group="block1" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

这是验证码:

window.ParsleyValidator
  .addValidator('completedgrades', function (value) {
    var childAttendedSchool = $('#three-ac-yrs-yes').val();
    return !(childAttendedSchool === 'on' && value.length === 0);
  }, 59)
  .addMessage('en', 'completedgrades', 'At least one grade must be selected.');

0 个答案:

没有答案