jquery - 使用 Jquery 进行条件验证有时不起作用

Question

我已经实现了 Jquery Validator，但遇到了一些条件验证有时不起作用的问题。

1. 我有一个要求，如果选择单选按钮，我创建了被调用的函数，并且我将单选按钮名称传递给它，则需要进行哪些控制。
2. 我在其他验证中也遇到过这个问题，其中仅当从 3 个单选按钮中选择任何一个时才需要控件。

当我每次调用警报时都将警报添加到函数中，但验证却没有
我已经截断了我的验证代码 如果我做错了什么请告诉我

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

Answer 1

.validate() 是插件的初始化方法，但是 as per your 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
}

初始化后，插件自动捕获提交按钮的点击事件。

• 删除您的点击处理程序。您不需要它，而且在许多情况下，它会干扰插件的默认行为。

另外:

• 由于您使用的是 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/