我有一个带有几个选项的选择框,如果有人选择了其他选项,我希望文本框淡入并且需要它,就让它显示而言我没问题,验证器是我遇到问题的地方。
这是我迄今为止尝试过的方法,主要基于可用的一个示例。
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>
我感觉跟没有使用函数的value部分有关系?我希望有更多关于此的文档。
最佳答案
您可以在不需要自定义验证器的情况下做到这一点(见下文)。
如果你真的想使用自定义验证器,你需要:
确保属性
data-parsley-conditionalvalue
等于:["[name=\"volunteer-check-in-new-name-title-select\"] option:selected", "other"]
.注意
option:selected
,您需要添加它以通过 javascript 从选项中获取值。您的字段中需要有属性
data-parsley-validate-if-empty
。否则验证器不会被执行,因为你的字段是空的。我真的说不出来,但看起来您正在注册验证器,因为它在 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 可以绑定(bind)到特定字段)。
如果选择的选项不是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 上
关于javascript - Parsley 自定义验证器,用于是否选择了选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29705878/