javascript - Parsley custom validator for if a select option is selected - Stack Overflow

admin管理员组

文章数量:1319929

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.

• javascript
• jquery
• coffeescript
• parsley.js
• custom-validators

Share Improve this question Follow asked Apr 17, 2015 at 17:33 JordanJordan 2,52344 gold badges3434 silver badges6666 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You 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:

1. 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.

2. 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.

3. 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