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

Question

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

我对此主题进行了快速搜索，但没有找到任何有值(value)的内容，这就是我在这里发帖寻求建议的原因。

问题:

如何使用 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 中添加在成功或错误时触发的事件。

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