Question

我的表单有两个提交按钮，一个提交主窗体，另一个使用ajax发送数据。无法弄清楚如何告诉bootstrap验证器在这种情况下我们使用不同的提交按钮。是的，使用preventDefault（）;

提交im

$("#submitformat").click(function( event ) {
   $('#formid').bootstrapValidator({  // this id is correct
     message: 'This value is not valid',
     fields: {
        alias: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and cannot be empty'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_]+$/,
                    message: 'The username can only consist of alphabetical, number and underscore'
                }
            }
        },
    }
});

HTML按钮：

<button type="submit" id="submitformat" class="btn btn-primary">Submit</button>

Answer 1

根据Here，您必须在 bootstrapvalidator 上使用 submitHandler 选项才能将其与ajax一起使用

从链接中删除

使用Ajax提交表单

如果您希望使用Ajax提交表单并在此之后执行其他任务，则可以使用submitHandler选项。

关于我们的模态示例，以下代码显示了如何：

通过Ajax请求将帐户发送到远程URL，检查是否存在具有给定用户名和密码的帐户如果是，请重新加载当前页面否则，显示通知帐户未找到的消息

<script>
$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {
            $.post(form.attr('action'), form.serialize(), function(result) {
                // The result is a JSON formatted by your back-end
                // I assume the format is as following:
                //  {
                //      valid: true,          // false if the account is not found
                //      username: 'Username', // null if the account is not found
                //  }
                if (result.valid == true || result.valid == 'true') {
                    // You can reload the current location
                    window.location.reload();

                    // Or use Javascript to update your page, such as showing the account name
                    // $('#welcome').html('Hello ' + result.username);
                } else {
                    // The account is not found
                    // Show the errors
                    $('#errors').html('The account is not found').removeClass('hide');

                    // Enable the submit buttons
                    $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
                }
            }, 'json');
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});
</script>

另外，当按钮具有 sumbit （按钮类型）时，不必覆盖 .click（）

Answer 2

Validator可能并不关心表单的提交方式。您可能需要执行以下操作来检测单击了哪个按钮：

if (event.target == $('#submitformat')) {
    ...
}

使用bootstrap验证程序定位特定的提交按钮

2 个答案: