0

2 つのラジオ ボタンを取得します。2 番目のものが選択されている場合、チェックボックスのグループを含む div が表示されます。その場合、チェックボックスの 1 つを選択する必要があります。ただし、最初のラジオ ボタンが選択されている場合、チェックボックスのある 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」を選択すると、エラー メッセージがまだ表示されます。

もう1つのことは、「グループ必須」を使用すると、選択した言語でエラーメッセージを取得できません。他のメッセージは正常に機能します。

4

1 に答える 1

0

ええ、data-dependent-validation ルールに小さなバグがありました。その理由は、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 ブランチではなく master ブランチでのみ修正されることに注意してください)、データを削除する必要があります-また、PersonOrCostDiv1 のチェック状態に応じて、JS を使用してコントロールまたはフィールドセットを無効/有効にします。 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 に答える