0

フォームには、2 つのチェック ボックス (cbDeclined & cbIsOOfFac)、2 つのテキスト フィールド、およびドロップダウン (txtHeight、txtWeight、ddlDevice) があります。

いずれかのチェック ボックスがオンになっている場合、他のコントロールは無効になり、もう一方のルールは適用されません。現在のルールは次のとおりです。

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElem");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElem");
    },
    errorPlacement: function (error, element) {
        var parent = element.parent();
        parent.append(error);
    },
    errorElement: "div",
    errorClass: "errorMsg"
});

function HeightWeightCtrlsEnabled() { return !cbDeclined.is(':checked') && !cbIsOOfFac.is(':checked'); }

txtHeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 3, min: 1, digits: true });
txtWeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 4, min: 1, digits: true });
ddlDevice.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); } });

function UpdateTextBoxes() {
    var disableCtrls = !HeightWeightCtrlsEnabled();

    txtHeight.prop('disabled', disableCtrls);
    txtWeight.prop('disabled', disableCtrls);
    ddlDevice.prop('disabled', disableCtrls);

    if (disableCtrls) {
        txtHeight.val('');
        txtWeight.val('');
        ddlDevice.val('');
    }
}

cbDeclined.click(function () {

    if (cbDeclined.is(':checked'))
        cbIsOOfFac.attr('checked', false);

    UpdateTextBoxes();
});

cbIsOOfFac.click(function () {

    if (cbIsOOfFac.is(':checked'))
        cbDeclined.attr('checked', false);

    UpdateTextBoxes();
});

問題が発生するのは次の場合です。ユーザーが txtWeight に何かを入力し、サブミットをクリックして ddlDevice と txtHeight の両方が必要なため強調表示します。ユーザーは cbDeclined と cbIsOOfFac のいずれかをクリックします。ハイライトは消えません。高さの周りを強調表示し、ドロップダウンして消える方法を見つけようとしています。

完全に機能する jsFiddler を作成しようとしましたが、すべてが正しく見えますが、何も機能しません。ここにリンクがあります（リンクを投稿できないので、少し拡大しました）

jsfiddle dot net/scarleton/9hDZQ/12/

最後の /12/ を削除すると、実物から切り貼りした私の最初のバージョンが表示されます。

提案に従って、 $('form').valid(); を追加しようとしました。いくつかの場所。

UpdateTextBoxes() 関数の最後に追加すると、必要なものではなく、強調表示され始めました。

いずれかのラジオ ボタンの click() イベントの後に追加すると、テキストは消えますが、実際のコントロールは強調表示されたままです。ルールの必須プロパティの機能が完全に機能していないようです。本当に興味深いのは、身長を入力して をクリックすると、体重とデバイスが強調表示され、その下にエラー メッセージが表示されることです。ラジオ ボタンの 1 つをクリックすると、テキストは消えますが、ハイライトは消えません。しかし...高さは強調表示されず、通常のままです。

4

1 に答える 1

1

作業フィドル: http://jsfiddle.net/9hDZQ/15/ (ハイライト CSS スタイルがありませんが、クラスは適切に追加/削除されます)

これらのボックスの 1 つをチェックしたときにフォームを再チェックするように検証プラグインに指示するコードはありませんでした。各クリックハンドラーの下部に追加$('form').valid();して、再検証を強制すると、次のようになります。

    cbDeclined.click(function () {

        if (cbDeclined.is(':checked'))
            cbIsOOfFac.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();
    });

    cbIsOOfFac.click(function () {

        if (cbIsOOfFac.is(':checked'))
            cbDeclined.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();            
    });
于 2012-09-20T22:43:17.997 に答える