javascript - formValidationプラグインを使用して「エラー」ではなく「警告」で検証する方法は?

Question

ここにあるformValidation プラグインを使用して、HTML5 フォームで入力検証チェックを実行しています。エラー検証は正常に機能しますが、入力検証でエラーの代わりに警告を提供する必要がある場合があり、ユーザーは無効な場合でも送信を続行できます。

このトピックについて簡単に検索しましたが、価値のあるものは何も見つかりませんでした。そのため、アドバイスを求めてここに投稿しています。

質問：

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