Webshim: Validate group of checkboxses if radiobutton is selected (jquery mobile)

Question

Got 2 radio buttons. If the second one is selected a div with a group of checkboxses is shown. In that case one of the checkboxses needs to be selected. But if the first radio button is selected then the div with the checkboxses isn't visibile but the validation messages is shown anyway.

        <script>
        webshims.setOptions('wspopover', { appendTo: 'body' });
        $.webshims.activeLang("sv");
    $.webshims.setOptions('forms', {
        replaceValidationUI: true,
        addValidators: true,
        customMessages: true
    });
    $.webshims.setOptions('forms-ext', {
        replaceUI: true
    });
    $.webshims.polyfill('forms forms-ext');
    </script>

<input id="PersonOrCostDiv1" class="user-success" type="radio" required="" value="1" name="Level" data-cacheval="false">
<input type="radio" id="PersonOrCostDiv2" name="Level" required="" value="2" data-cacheval="false" class="user-success">

<input type="checkbox" data-dependent-validation='{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}' value="100000001" id="checkbox-group100000001" class="group-required user-error" name="SelectedCostDivisions" aria-invalid="true">
<input type="checkbox" data-dependent-validation="'{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}' value="100000004" id="checkbox-group100000004" class="group-required user-error" name="SelectedCostDivisions" aria-invalid="true">

I've been testing with and without "from-prop" and had some looks on this page: http://afarkas.github.io/webshim/demos/demos/webforms/4-webforms-custom-validity.html

Notice what I think is a bug. If I fill up the requierd properties and then choose 'test 3' in the special case in the button. The page is posted to server. But if I as in the first case fills up the requierd values and then choose 'test1' I got an error message. If I then choose 'test 3' that should work the error message is still there.

And another thing is when I use the 'group-required' I cant manage to get the error message in the selected language. The other messages works as it should.

Answer 1

Yeah, there was a small bug in the data-dependent-validation rule. The reason is, that data-depnendent-validation isn't really a customValidity modifier but a general property modifier, which has to be executed even if the control is invalid by another rule. (in your case group-required). I have fixed this issue (https://github.com/aFarkas/webshim/commit/7f670cf7693ab03dfc86097bda0491faf57b00ea).

But you should do it a little bit different. Instead of using data-dependent-validation='{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}', you should simply use: data-dependent-validation="PersonOrCostDiv2". This will automatically check if the control is checked and will disable/enable the form-controls. Your HTML would look something like this (much simpler!):

<form>
    <input id="PersonOrCostDiv1" class="user-success" type="radio" required="" value="1" name="Level" data-cacheval="false">
    <input type="radio" id="PersonOrCostDiv2" name="Level" required="" value="2" data-cacheval="false">
    <fieldset data-dependent-validation="PersonOrCostDiv2">
        <input type="checkbox" value="100000001" id="checkbox-group100000001" class="group-required" data-errormessage="Please check on this group" name="SelectedCostDivisions">
        <input type="checkbox" value="100000004" id="checkbox-group100000004" name="SelectedCostDivisions">
    </fieldset>
    <input type="submit" />
</form>

In case you don't want to update to the fixed version (It may have some bugs, because it's not a stable tested build (Note this is only fixed in master branch not the main gh-pages branch), you should remove data-dependent-validation. And disable/enable the controls or the fieldset yourself with JS depending on the checkedness of PersonOrCostDiv1. In case you use filedset:disabled, you have to use $.prop(fieldset, 'disabled', true/false) to make it work in IE. see: http://jsfiddle.net/trixta/K6nn9/).

To change the errormessage you need to either set it descriptive using the data-errormessage attribute (see html above) or with the following JS code:

webshims.ready('form-validators', function(){ 
    webshims.customErrorMessages['group-required'].sv = "you really have to check on of these controls";
}); 

Feel free to ask again, if this doesn't help.