2

我已经实现了 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;
    }
}
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 回答