如何在不是提交类型而是按钮类型且没有表单的按钮单击事件上调用验证？

Question

我一直在努力解决这个问题，我知道只要按钮是提交类型，就可以在表单中触发验证。但是我在视图上还有一些其他选项卡，当我使用提交时，它会导致 posback 并返回到第一个选项卡。我不希望发生这种情况，所以我将验证放在函数中并将按钮类型更改为按钮并删除表单标签并尝试在按钮单击事件上调用验证函数但它没有触发。这可以不使用表单标签来实现吗？

我的代码是这样的...

    $(document).ready(function () {
    $("#btnUpdateModerator").click(function () {
        ValidateIt();
    });
    ValidateIt();
});
function ValidateIt() {
    var validator = $("#Users").bootstrapValidator({
        feedbackIcons: {
            valid: "glyphicon glyphicon-ok",
            invalid: "glyphicon glyphicon-remove",
            validating: "glyphicon glyphicon-refresh"
        },
        fields: {
            DealerUsername: {
                message: "Username is required",
                validators: {
                    notEmpty: {
                        message: "Please Provide Username"
                    }
                }
            },
            email: {
                message: "Email address is required",
                validators: {
                    notEmpty: {
                        message: "Please provide Email address"
                    },
                    emailAddress: {
                        message: "Email address was invalid"
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: "Password is required"
                    },
                    stringLength: {
                        min: 6,
                        message: "Password must be at least 6 characters long"
                    },
                    different: {
                        field: "email",
                        message: "Email and Password cannot match"
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: "Confirm Password is required"
                    },
                    identical: {
                        field: "password",
                        message: "Password and Confirmation Password must match"
                    }
                }
            },
            department: {
                validators: {
                    notEmpty: {
                        message: "Department is Required"
                    }
                }
            }
        }
    });
}

Answer 1

我相信 bootstrap 验证器将自己绑定到表单的 submit() 方法，因此将它移到函数中实际上对您没有帮助。不过，您可以拦截表单的提交方法，直到您希望它提交时才允许它提交。

$("#myForm").submit(function(e){
    e.preventDefault(); // <-- prevents the form from submitting
    // do stuff
    this.submit() // <-- send it through
});

Answer 2

我认为您需要保留表单元素，但将按钮类型设置为 "button" 而不是 "submit"。然后，您可以使用 bootstrap 验证器的 "validate" 方法手动验证表单。

假设您的表单元素具有 "Users" 的 id，您应该能够将代码更改为：

$(document).ready(function () {
    $("#btnUpdateModerator").click(function () {
        $('#Users').bootstrapValidator('validate');
    });
    ValidateIt();
});

注意：您编写的 ValidateIt() 函数不会验证表单，它会在表单上设置验证器。

注意：我认为 API 文档位于此处：http://bv.doc.javake.cn/api/

在您发表关于拨打 ajax 电话的评论后更新：

如果您想在单击按钮时进行 ajax 调用，但前提是表单有效，我相信您会执行以下操作：

    $("#btnUpdateModerator").click(function () {
        $('#Users').bootstrapValidator('validate');
        if ($('#Users').bootstrapValidator('isValid')) {
            // Make the ajax call here.
        }
    });

另一种写法是：

    $("#btnUpdateModerator").click(function () {
        var validator = $('#Users').data('bootstrapValidator');
        validator.validate();
        if (validator.isValid()) {
            // Make the ajax call here.
        }
    });

如何在不是提交类型而是按钮类型且没有表单的按钮单击事件上调用验证？

How to call validation on a button click event thats not a submit type but a button type and without a form?

jquery

asp.net-mvc

validation

bootstrapvalidator