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

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

提问by Chris

I have been trying to figure this out, I know validation can be fired within a form as long as the button is of type submit. But I have a few other tabs on the view and when I use submit, it causes a posback and goes back to the first tab. I don't want that to happen so I put my validation in a function and changed the button type to a button and removed the form tag and tried calling the validation function on the button click event and its not firing. Is this possible to do without using a form tag?

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

My code is this...

我的代码是这样的...

    $(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"
                    }
                }
            }
        }
    });
}

回答by John S

I think you need to keep the form element, but set the button type to "button" instead of "submit". You can then manually validate the form using the bootstrap validator's "validate" method.

我认为您需要保留表单元素，但将按钮类型设置为“按钮”而不是“提交”。然后，您可以使用引导验证器的“验证”方法手动验证表单。

Assuming your form element has the idof "Users", you should be able to change your code to:

假设您的表单元素具有id“用户”，您应该能够将代码更改为：

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

Note: The ValidateIt()function as you have it written does not validate the form, it sets up the validator on the form.

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

---

---

Note: I think the API documentation is located here: http://bv.doc.javake.cn/api/

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

---

---

Update after your comment about making an ajax call:

在您对 ajax 调用发表评论后更新：

If you want to make an ajax call when the button is clicked, but only if the form is valid, I believe you would do the following:

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

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

Another way to write this is:

另一种写法是：

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

回答by Mike S.

I believe bootstrap validator binds itself to a form's submit() method, so moving it into a function won't actually help you. You can intercept the form's submit method though, and not allow it to submit until you want it to.

我相信引导验证器将自身绑定到表单的 submit() 方法，因此将其移动到函数中实际上对您没有帮助。但是，您可以拦截表单的提交方法，并且在您需要之前不允许它提交。

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