admin管理员组文章数量:1319463
I have a select box with a few options, if someone selects other I want a text box to fade in and for it to be required, as far as getting it to show up I'm fine with that, the validator is where I'm having issues.
Here is what I've tried so far, mostly based on the one example available.
conditionalvalue:
fn: (value, requirements) ->
if requirements[1] == $(requirements[0]).val()
return false
true
On my field I have this
data-parsley-conditionalvalue='["[name=\"volunteer-check-in-new-name-title-select\"]", "other"]'
For reference here is what my select box looks like
<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>
I feel like it has something to do with not using the value part of the function? I wish there was more documentation on this.
I have a select box with a few options, if someone selects other I want a text box to fade in and for it to be required, as far as getting it to show up I'm fine with that, the validator is where I'm having issues.
Here is what I've tried so far, mostly based on the one example available.
conditionalvalue:
fn: (value, requirements) ->
if requirements[1] == $(requirements[0]).val()
return false
true
On my field I have this
data-parsley-conditionalvalue='["[name=\"volunteer-check-in-new-name-title-select\"]", "other"]'
For reference here is what my select box looks like
<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>
I feel like it has something to do with not using the value part of the function? I wish there was more documentation on this.
Share Improve this question asked Apr 17, 2015 at 17:33 JordanJordan 2,5234 gold badges34 silver badges66 bronze badges 02 Answers
Reset to default 6You can do that without the need of a custom validator (see below).
If you really want to use a custom validator, you'll need to:
Make sure the attribute
data-parsley-conditionalvalue
is equal to this:["[name=\"volunteer-check-in-new-name-title-select\"] option:selected", "other"]
.Note the
option:selected
, you need to add that to get the value from the option via javascript.You need to have the attribute
data-parsley-validate-if-empty
in your field. Otherwise the validator won't be executed because your field is empty.I can't really tell, but it seems that you're registering the validator as it is in the Examples page. If so, you need to make sure
parsley.js
is not loaded yet. Otherwise take a look at the documentation.
I leave you this working code (also with an available jsfiddle). Note that I am loading Parsley before registering the validator.
<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>
And this should do it.
If you don't want a custom validator, you can use the built in data-parsley-required
. The basic logic is: when you change the field volunteer-check-in-new-name-title-select
, verify if the selected option is other
. If so, you display the textbox and add the attribute data-parsley-required
and apply Parsley to the field (check the documentation where you can see that parsley can be binded to specific fields).
If the selected option is not other
, hide the field, remove the data-parsley-required
attribute and destroy parsley on that field.
You code would be something like this (you'll need to convert it to 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>
A live version is on this jsfiddle
After trying couple of ways for adding custom validators, I have realized that shortest way is to update the data-parsley-required attribute on change of dropdown.
$('#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);
});
本文标签: javascriptParsley custom validator for if a select option is selectedStack Overflow
版权声明:本文标题:javascript - Parsley custom validator for if a select option is selected - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742061586a2418615.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论