错误处理程序上的引导验证器不起作用

Posted 2023-05-08

【中文标题】错误处理程序上的引导验证器不起作用

【英文标题】：Bootstrap validator on error handler not working

【发布时间】：2018-06-20 23:32:35

【问题描述】：

我在我的 asp.mvc 5 项目中的 ajax 表单上使用引导验证器：

$('#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() 和 return false 将不起作用。如何让它停止提交？

【问题讨论】：

我认为错误事件名称是err.form.bv 而不是error。

【参考方案1】：

使用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.bv 和 status.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
);