Question

有2个单选按钮。如果选择第二个，则显示带有一组复选框的div。在这种情况下，需要选择其中一个复选框。但是如果选择了第一个单选按钮，那么带有复选框的div不是可见的，但无论如何都会显示验证消息。

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

我一直在使用和不使用“from-prop”进行测试，并且在此页面上有一些外观： http://afarkas.github.io/webshim/demos/demos/webforms/4-webforms-custom-validity.html

请注意我认为的错误。如果我填写所需的属性，然后在按钮的特殊情况下选择“测试3”。该页面将发布到服务器。但如果我在第一种情况下填写所需的值，然后选择'test1'我收到一条错误消息。如果我然后选择“测试3”应该工作，错误信息仍然存在。

另一件事是当我使用'group-required'时，我无法设法以所选语言获取错误消息。其他消息可以正常工作。

Answer 1

是的，数据相关验证规则中存在一个小错误。原因是，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>

如果您不想更新到固定版本（它可能有一些错误，因为它不是一个稳定的测试版本（注意这只在主分支而不是主要的gh-pages分支中修复），你应该取决于PersonOrCostDiv1的检查，使用JS自己禁用/启用控件或字段集。如果使用fieldsset：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";
});

如果这没有用，请随时再问。

Webshim：如果选择了radiobutton，则验证复选框组（jquery mobile）

1 个答案: