如果 select 选项被 selected，Parsley 自定义验证器

Question

我有一个带有几个选项的 select 框，如果有人 select 其他人我想要一个文本框淡入并且需要它，只要让它显示up 我没问题，验证器是我遇到问题的地方。

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

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盒子的样子

供参考

<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

您可以在不需要自定义验证器的情况下做到这一点（见下文）。

如果您真的想使用自定义验证器，您需要：

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

注意 option:selected，您需要添加它以通过 javascript 从选项中获取值。
您的字段中需要有属性 data-parsley-validate-if-empty。否则验证器不会被执行，因为你的字段是空的。
我真的说不出来，但看起来你正在注册验证器，因为它在 Examples page. If so, you need to make sure parsley.js is not loaded yet. Otherwise take a 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 属性。

$('#select_input_id').change(function(){
   if(this.value=='other') 
     $('#other_input_id').attr('data-parsley-required',false);
   else  
     $('#other_input_id').attr('data-parsley-required',true);
});

如果 select 选项被 selected，Parsley 自定义验证器

Parsley custom validator for if a select option is selected

javascript

jquery

custom-validators

coffeescript

parsley.js