如果选择了选择选项，则为Parsley自定义验证器

Question

我有一个带有几个选项的选择框，如果有人选择另一个，我希望淡入一个文本框并要求该文本框显示出来，那么我就可以了，验证器是在这里我遇到了问题。

这是到目前为止我尝试过的方法，主要是基于一个可用的示例。

conditionalvalue:
    fn: (value, requirements) ->
        if requirements[1] == $(requirements[0]).val()
            return false
        true

在我的领域上，我有这个

data-parsley-conditionalvalue='["[name=\"volunteer-check-in-new-name-title-select\"]", "other"]'

供参考，这是我的选择框的外观

<select name="volunteer-check-in-new-name-title-select" data-bind="volunteer-new-final-title-field">
    <option value="dr">Dr.</option>
    <option value="mr">Mr.</option>
    <option value="mrs">Mrs.</option>
    <option value="miss">Miss.</option>
    <option value="ms">Ms.</option>
    <option value="other">Other</option>
</select>

我觉得这与不使用函数的值部分有关？我希望对此有更多文档。

Answer 1

您可以执行此操作而无需自定义验证器（请参阅下文）。>>

如果您确实要使用自定义验证器，则需要：

1. 确保属性data-parsley-conditionalvalue等于此：["[name=\"volunteer-check-in-new-name-title-select\"] option:selected", "other"]。

   请注意option:selected，您需要添加它才能通过javascript从选项中获取值。

2. 您需要在字段中输入属性data-parsley-validate-if-empty。否则，验证器将不会执行，因为您的字段为空。

3. 我无法真正说出，但似乎您正在按Examples page中的形式注册验证器。如果是这样，则需要确保尚未加载parsley.js。否则，请输入look at the documentation。

我将这个工作代码留给您（也带有available jsfiddle）。请注意，我在注册验证程序之前正在加载Parsley。

<form id="someForm">
    <select name="volunteer-check-in-new-name-title-select" data-bind="volunteer-new-final-title-field">
        <option value="dr">Dr.</option>
        <option value="mr">Mr.</option>
        <option value="mrs">Mrs.</option>
        <option value="miss">Miss.</option>
        <option value="ms">Ms.</option>
        <option value="other">Other</option>
    </select>

    <input type="text" name="otherTitle" data-parsley-validate-if-empty data-parsley-conditionalvalue='["[name=\"volunteer-check-in-new-name-title-select\"] option:selected", "other"]' />
    <input type="submit" />    
</form>

<script>
$(document).ready(function() {
    window.ParsleyValidator
    .addValidator('conditionalvalue', function (value, requirements) {
        if (requirements[1] == $(requirements[0]).val() && '' == value)
            return false;
        return true;
    }, 32)
    .addMessage('en', 'conditionalvalue', 'You have to insert some value');

    $("#someForm").parsley();
});
</script>
并且应该这样做。

---

如果您不需要自定义验证器，则可以使用内置的data-parsley-required。基本逻辑是：更改字段volunteer-check-in-new-name-title-select时，请验证所选选项是否为other。如果是这样，则显示文本框，并添加属性data-parsley-required并将Parsley应用于字段（check the documentation，在该字段中可以看到parsley可绑定到特定字段）。

如果所选选项不是other，则隐藏字段，删除data-parsley-required属性并销毁该字段上的欧芹。

您的代码将是这样（您需要将其转换为coffeescript）：

<form id="someForm">
    <select name="volunteer-check-in-new-name-title-select" data-bind="volunteer-new-final-title-field">
        <option value="dr">Dr.</option>
        <option value="mr">Mr.</option>
        <option value="mrs">Mrs.</option>
        <option value="miss">Miss.</option>
        <option value="ms">Ms.</option>
        <option value="other">Other</option>
    </select>

    <input type="text" name="otherTitle" style="display: none;"/>
    <input type="submit" />    
</form>

<script>
$(document).ready(function() {
    $("#someForm").parsley();

    $("select[name=volunteer-check-in-new-name-title-select]").on('change', function() {
        console.log($(this).val());
        if ($(this).val() === 'other') {
            $("input[name=otherTitle]")
                .css('display', 'block')
                .attr('data-parsley-required', 'true')
                .parsley();
        } else {
            $("input[name=otherTitle]")
                .css('display', 'none')
                .removeAttr('data-parsley-required')
                .parsley().destroy();
        }
    });
});
</script>
实时版本在this jsfiddle上

Answer 2

[尝试了几种添加自定义验证器的方法之后，我意识到最快捷的方法是在下拉菜单更改时更新data-parsley-required属性。