如果选择了选项,则为欧芹自定义验证器

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. 我无法分辨,但似乎您正在注册验证器,因为它在示例页面中.如果是这样,您需要确保parsley.js尚未加载.否则请查看文档.

我留给你这个工作代码(也有一个可用的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应用于该字段(请查看文档,您可以在其中看到可以将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>

这个jsfiddle的实时版本