3

使用する

bootstrap3-wysihtml5-bower 2013-11-22 (WYSIWYG エディター)

と

BootstrapValidator v0.5.2

ブートストラップ検証を使用してテキストエリア (bootstrap-wysihtml5 エディター) を検証します。NotEmptyとMax Charactersを確認してからフォームを送信するだけです。

これまで試した

$('#setpolicyform').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  ignore: ":hidden:not(textarea)",
  fields: {
    policyta: {
      group: '.lnbrd',
      validators: {
        notEmpty: {
          message: 'Textarea cannot be empty'
        }
      }
    }
  }
}).on('success.form.bv', function(e) {
  e.preventDefault();
  var $form = $("#setpolicyform"),
    $url = $form.attr('action');
  $.post($url, $form.serialize()).done(function(dte) {
    $("#policy-content").html(dte);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="POST" action="self.php" name="setpolicyform" id="setpolicyform">
  <div class='box-body pad'>
    <div class="form-group">
      <div class="lnbrd">
        <textarea class="form-control textarea" name="policyta" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
      </div>
    </div>
  </div>
  <div class="box-footer clearfix">
    <button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn"><i class="fa fa-save"></i>&nbsp;SAVE</button>
  </div>
</form>

JSFiddle https://jsfiddle.net/v6s0726L/1/

4

2 に答える 2

2

皆さん、bootstrapValidator は formValidation にアップグレードされました。formValidation の更新バージョンを使用している場合は、別のクラスを追加してテキスト領域を非表示にする代わりに、これを行うことができます。

   $('#setpolicyform').formValidation({
                                framework: 'bootstrap',
                                excluded: [':disabled'], /* This will do the trick of validating for notEmpty*/
                                icon : {
                                    valid : '',
                                    invalid : '',
                                    validating : 'glyphicon glyphicon-refresh'
                                },
                                fields: {
                                 policyta: {
                                  group: '.lnbrd',
                                  validators: {
                                   notEmpty: {
                                   message: 'Textarea cannot be empty'
                                   },
                                   stringLength: {
                                    max: 50,
                                   message: 'Maximum 50 Characters Required'
                               }
                            }
                         }
                      }
        });

$('.textarea').wysihtml5({
        events: {
            change: function () {
                $('#setpolicyform').formValidation('revalidateField', 'policyta');
        }
    }
});

ありがとう

于 2016-11-09T10:59:11.420 に答える
1

textareaで初期化した後、それは非表示になり、によって無視されるため、検証しないWYSIWYG Editor理由を検証する方法がありますbootstrapValidatorWYSIWYG Editorname="policyta"bootstrapValidator

したがって、1 つの方法は を非表示にせずtextarea、設定するだけz-index: -1で の背後に移動し、初期化後にイベントWYSIWYG Editorを使用して CSS を追加し、WYSIWYG Editor load

CSS

.textnothide {
    display: block !important;
    position: absolute;
    z-index: -1;
}

JS

$('.textarea').wysihtml5({
    events: {
        load: function () {
            $('.textarea').addClass('textnothide');
        }
    }
});

次に、テキストエリアを検証しましょう。制限bootstrapValidatorも要求しましたMax Characters

最初bootstrapValidatorのスクリプト

$('#setpolicyform').bootstrapValidator({
    message: 'This value is not valid',
    //ignore: ":hidden:not(textarea)", //<---- No Need of This
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        policyta: {
            group: '.lnbrd',
            validators: {
                notEmpty: {
                    message: 'Textarea cannot be empty'
                },
                stringLength: { //<- Limit Maximum Character(s)
                    max: 50,
                    message: 'Maximum 50 Characters Required'
                }
            }
        }
    }
});

でテキストエリアをチェックして検証しましょう。変更をチェックして再検証するには、bootstrapValidator別のwysihtml5イベントが必要です。change

change: function () {
    $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
}

したがって、最終的なスクリプトは次のようになります

$(document).ready(function () {
    $('#setpolicyform').bootstrapValidator({
        message: 'This value is not valid'
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            policyta: {
                group: '.lnbrd',
                validators: {
                    notEmpty: {
                        message: 'Textarea cannot be empty'
                    },
                    stringLength: {
                        max: 50,
                        message: 'Maximum 50 Characters Required'
                    }
                }
            }
        }
    });
    $('.textarea').wysihtml5({
        events: {
            load: function () {
                $('.textarea').addClass('textnothide');
            },
            change: function () {
                $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
            }
        }
    });
});

フィドルの作業例

于 2015-11-26T14:33:01.663 に答える