错误处理程序上的Bootstrap验证程序无法正常工作

时间:2018-01-11 15:20:50

标签: jquery asp.net-mvc twitter-bootstrap bootstrapvalidator

我在我的asp.mvc 5项目中使用ajax表单上的bootstrap验证器:

$('#formID').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                ddd: {
                    validators: {
                        notEmpty: {
                            message: 'Campo requerido'
                        }
                    }
                },
                rede: {
                    validators: {
                        notEmpty: {
                            message: 'The amount is required'
                        }
                    }
                },
                rede: {
                    validators: {
                        notEmpty: {
                            message: 'The color is required'
                        }
                    }
                },
                tipo: {
                    validators: {
                        notEmpty: {
                            message: 'The size is required'
                        }
                    }
                },
                obs: {
                    validators: {
                        notEmpty: {
                            message: 'The size is required'
                        }
                    }
                }
            }
        }).on('error', function (e) {
            e.preventDefault();
        });

一切正常,但点击提交后,仍会提交:

@using (Ajax.BeginForm("InserirChamado", "ChamadoLLPP", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "FuncSucesso", OnFailure = "FuncError" }, new { @id = "formID" })){}

preventDefault(),stopPropagation()并返回false赢得了工作。怎么能让它停止提交?

1 个答案:

答案 0 :(得分:0)

使用error.form.bv和/或success.form.bv处理程序来处理此示例给出的表单验证错误(请参阅event handling作为参考):

$('#formID').bootstrapValidator({
     feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
         field1: {
            validators: {
                 notEmpty: {
                    message: 'This field cannot be empty'
                 }
            }
         },

         // other field validators
    }
 }).on('error.form.bv', function (e) {
      e.preventDefault();

      // prevent form submission if preventDefault() not working
      $('#formID').submit(false);

      // other validation error handlings

 }).on('success.form.bv', function (e) {
      e.preventDefault();

      // other stuff

      $('#formID').bootstrapValidator('defaultSubmit');
 });

此外,您可以添加error.field.bvstatus.field.bv处理程序来禁用/启用提交按钮功能:

$('#formID').bootstrapValidator({ 

    // validation settings, cut for brevity

}).on('error.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(true); // Disable submit button
}).on('success.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(false); // Enable submit button
});