2

Jquery Validator を実装しましたが、いつか機能しない条件付き検証の問題に直面しています。

  1. 呼び出される関数を作成し、ラジオボタン名を渡すためにラジオボタンが選択されている場合、コントロールが必要であるという要件があります。
  2. 3 つのうち 2 つのラジオ ボタンのいずれかが選択されている場合にのみコントロールが必要な他の検証で、この問題に直面しました。

アラートが呼び出されるたびに関数にアラートを追加すると、検証は行われません
検証コードが切り捨てられました

JS コード:-

$('#ConditionalLiability').validate({
    onfocusout: false,
    onkeyup: false,
    rules: {
        ConcernsNoted: {
            required: true
        },
        ConcernsWithExteriorWalls: {
            required: ValidationRadio("ConcernsNoted", 'Y')
        },
        chkExteriorWalls: {
            required: ValidationRadio("ConcernsWithExteriorWalls", 'Y')
        },
        GranularLossComments: {
            required: Conditional("GranularLoss")
        }
    },
    showErrors: function (errorMap, errorList) {
        var messages = "";
        var check = 0;
        $.each(errorList, function (index, value) {
            check = 1;
            var id = $(value.element).attr('id');
            messages += (index + 1) + ". " + value.message + "\n";
        });
        messages = "Please correct following errors \n" + messages;
        if (check == 1) {
            alert(messages);
        }
    },
    submitHandler: function () {
        SaveData();
    },
    messages: {
        ConcernsNoted: {
            required: "Please select a value for Concerns With Home Exterior"
        },
        ConcernsWithExteriorWalls: {
            required: "Please select a value for Concerns With Exterior Walls"
        },         
        chkExteriorWalls: {
            required: "Please select at least one option for Concerns with Exterior Walls"
        },
        GranularLossComments: { required: "Please enter comments for GranularLoss"
        }

    }
});


function Conditional(id) {
    var element = "input:radio[name='" + id + "']:checked";
    var radio_value = $(element).val();
    if ((radio_value == 'M') || (radio_value == 'S')) {
        return true;
    } else {
        return false;
    }
}

function ValidationRadio(id, check) {
    var element = "input:radio[name='" + id + "']:checked";
    var radio_value = $(element).val();
    if (radio_value == check) {
        alert('true');
        return true;
    } else {
        return false;
    }
}
4

1 に答える 1

1

.validate()はプラグインの初期化メソッドですが、 jsFiddle に従って、フォームの有効性をテストするためのメソッドであるかのように呼び出しています...

$(document).ready(function () {
      $('#submit').click(function () {
        submitForm();
    });
});

function submitForm() { 
    $('#ConditionalLiability').validate({
        // options & rules
    });
}

function Conditional(id) {
    // your code
}

function ValidationRadio(id, check) {
    // your code
}

初期化されると、プラグインは送信ボタンのクリック イベントを自動的にキャプチャします。

  • clickハンドラーを取り除きます。これは必要ありません。多くの場合、プラグインのデフォルトの動作に干渉します。

また：

  • jQuery Mobile を使用しているため、.on('pageinit', function()代わりに使用します.ready(function()

  • 壊れた外部条件関数を取り除き、depends代わりにサブオプションを利用してください (以下を参照)。

コードをこれにリファクタリング...

$(document).on('pageinit', function () {

    $('#ConditionalLiability').validate({
        onfocusout: false,
        onkeyup: false,
        rules: {
            ConcernsNoted: {
                required: true
            },
            ConcernsWithExteriorWalls: {
                required: {
                    depends: function (element) {
                        return $("[name='ConcernsNoted'][value='Y']").is(":checked");
                    }
                }
            },
            chkExteriorWalls: {
                required: {
                    depends: function (element) {
                        return $("[name='ConcernsWithExteriorWalls'][value='Y']").is(":checked");
                    }
                }
            },
            GranularLossComments: {
                 required: {
                    depends: function (element) {
                return ( $("[name='GranularLoss'][value='M']").is(":checked") || $("[name='GranularLoss'][value='S']").is(":checked") );
                    }
                 }
            }
        },
        showErrors: function (errorMap, errorList) {
            var messages = "";
            var check = 0;
            $.each(errorList, function (index, value) {
                check = 1;
                var id = $(value.element).attr('id');
                messages += (index + 1) + ". " + value.message + "\n";
            });
            messages = "Please correct following errors \n" + messages;
            if (check == 1) {
                alert(messages);
            }
        },
        submitHandler: function () {
            SaveData();
        },
        messages: {
            ConcernsNoted: {
                required: "Please select a value for Concerns With Home Exterior"
            },
            ConcernsWithExteriorWalls: {
                required: "Please select a value for Concerns With Exterior Walls"
            },
            chkExteriorWalls: {
                required: "Please select at least one option for Concerns with Exterior Walls"
            },
            GranularLossComments: {
                required: "Please enter comments for GranularLoss"
            }
        }
    });

});

デモ: http://jsfiddle.net/6GHKN/

于 2013-04-23T20:25:54.620 に答える