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

Question

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

Answer 1

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 id of "Users", you should be able to change your code to:

$(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.

---

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

---

Update after your comment about making an ajax call:

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:

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

Answer 2

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.

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