0

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.

4

1 回答 1

0

是的，数据相关验证规则中有一个小错误。原因是，data-depnendent-validation 并不是真正的 customValidity 修饰符，而是一个通用的属性修饰符，即使控件因其他规则无效，也必须执行该修饰符。（在您的案例组中是必需的）。我已经解决了这个问题（https://github.com/aFarkas/webshim/commit/7f670cf7693ab03dfc86097bda0491faf57b00ea）。

但是你应该做一些不同的事情。而不是使用 data-dependent-validation='{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}'，你应该简单地使用：data-dependent-验证="PersonOrCostDiv2"。这将自动检查控件是否被选中，并将禁用/启用表单控件。您的 HTML 看起来像这样（简单得多！）：

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

如果您不想更新到固定版本（它可能有一些错误，因为它不是一个稳定的测试版本（注意这仅在 master 分支而不是主 gh-pages 分支中修复），您应该删除数据-依赖验证。并根据 PersonOrCostDiv1 的检查情况自行使用 JS 禁用/启用控件或字段集。如果您使用filedset:disabled，则必须使用$.prop(fieldset, 'disabled', true/false) 来让它在 IE 中工作。见：http: //jsfiddle.net/trixta/K6nn9/）。

要更改错误消息，您需要使用 data-errormessage 属性（参见上面的 html）或使用以下 JS 代码将其设置为描述性：

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

如果这没有帮助，请随时再次询问。

于 2014-01-15T09:37:57.763 回答