如何使用 formValidation 插件使用 "warning" 而不是 "error" 进行验证？

Question

我正在使用位于此处的 formValidation plugin 对 HTML5 表单执行输入验证检查。错误验证工作正常，但现在我有一个案例，我需要在输入验证中提供 warning 而不是 error ，用户如果无效，仍然可以继续提交。

我已经对该主题进行了快速搜索，但没有找到任何有价值的东西，这就是我在这里发帖寻求建议的原因。

问题：

如何使用 formValidation 插件进行警告验证？

HTML 输入-

  <input id="ApplicationID" name="Application"  required="required" type="text" class="form-control">

代码-

     //Validate the required input fields to prevent submit if not 
    //populated.
    $('#createForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            Application: {
                validators: {
                    notEmpty: {
                        message: 'The idVal name field is required'
                    },
                    callback: {
                        message: 'A record for this Application type already exists!',
                        callback: function (value, validator, $field) {
                            // Determine if the input idVal already exists
                            var idVal = $('#ApplicationID').val();

                            //Check that idVal isn't empty before calling match validation
                            if(idVal )
                            {
                                //Call a bool method to check if idVal already exists
                                return checkEPRIDExists(idVal );
                            }

                        }

                     }
                }
            }

        }


    });

当前验证阻止提交并突出显示为红色，寻找一个琥珀色警告，而不是允许在无效时提交：

Answer 1

不确定你是怎么处理这个的，因为它是不久前的事。

下面是一个示例，详细说明了如何为字段实施警告（而不仅仅是错误或成功）。

我认为关键是您必须在 formValidation 中添加要在 success 或 error 上触发的事件。

$('#createForm').formValidation({
   framework: 'bootstrap',
   icon: {
       valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
   },
   fields: {
       Application: {
           validators: {
               notEmpty: {
                   message: 'The idVal name field is required'
               },
               callback: {
                   message: 'A record for this Application type already exists!',
                   callback: function (value, validator, $field) {
                       // Determine if the input idVal already exists
                       var idVal = $('#ApplicationID').val();

                       //Check that idVal isn't empty before calling match validation
                       if(idVal )
                       {
                           //Call a bool method to check if idVal already exists
                           return checkEPRIDExists(idVal );
                       }

                   }

                }
           }
       }

   }
 })
 // This event will be triggered when the field passes given validator
 .on('success.validator.fv', function(e, data) {
     // data.field     --> The field name
     // data.element   --> The field element
     // data.result    --> The result returned by the validator
     // data.validator --> The validator name

     if (data.field === 'Application'
         && data.validator === 'callback'
         && (data.fv.isValidField('Application'))){
         // The Application field passes the callback validator
         data.element                    // Get the field element
             .closest('.form-group')     // Get the field parent

             // Add has-warning class
             .removeClass('has-success')
             .addClass('has-warning')

             // Show message
             .find('small[data-fv-validator="callback"][data-fv-for="Application"]')
                 .show();
     }
 })
 // This event will be triggered when the field doesn't pass given validator
 .on('err.validator.fv', function(e, data) {
     // Removes the has-warning class when it doesn't pass any validator
     if (data.field === 'Application') {
         data.element
             .closest('.form-group')
             .removeClass('has-warning');
     }
});

如何使用 formValidation 插件使用 "warning" 而不是 "error" 进行验证？

How to validate with "warning" instead of "error" using formValidation plugin?

javascript

warnings

callback

twitter-bootstrap

formvalidation-plugin