How to validate wysiwyg editor using bootstrap validation

Question

Using

bootstrap3-wysihtml5-bower 2013-11-22 (WYSIWYG Editor)

and

BootstrapValidator v0.5.2

Validate textarea(bootstrap-wysihtml5 editor) using bootstrap validation. Just need to check NotEmpty and Max Characters then submit Form.

So far tried

$('#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/

I'm lost. From what I can see that wysiwyg tool is less than worthless. Perhaps I'm doing it wrong. Not sure why you even thought to mention it. And the code snippet thing too seems to be not worth much. How about a simple JS fiddle showing us what you've tried. — zipzit
– zipzit, Commented Nov 20, 2015 at 10:22
I'm trying to understand what tool you are using. For bootstrapvalidator() I'm seeing This repository is for anyone who still use the BootstrapValidator. It's no longer supported. Please upgrade to use FormValidation. formvalidation.io — zipzit
– zipzit, Commented Nov 20, 2015 at 10:31
@zipzit find JS Fiddle in Question(Updated). I'm using core php(no tools). its an update(part) for my client project(not doing from scratch). thanks for trying to understand issue. — Syed Nizamudeen
– Syed Nizamudeen, Commented Nov 23, 2015 at 2:08
@zipzit i need to check textarea 'not Empty' before form submit. — Syed Nizamudeen
– Syed Nizamudeen, Commented Nov 23, 2015 at 2:10

Hasan K · Accepted Answer · 2016-11-09 10:59:11Z

Folks, bootstrapValidator has been upgraded to formValidation. If you are using the updated version of formValidation you can do this instead of adding a separate class to hide the text area:

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

Thanks

Shehary · Accepted Answer · 2015-11-26 14:33:01Z

There is a way to validate the WYSIWYG Editor, reason bootstrapValidator not validating it because after initializing WYSIWYG Editor on textarea name="policyta", it will be hidden and ignored by bootstrapValidator

So the one way is do not hide the textarea, just set z-index: -1 and it will go behind the WYSIWYG Editor, use WYSIWYG Editor event load to add the CSS after initializing,

CSS

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

JS

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

Now let's validate the textarea with bootstrapValidator and you also asked for Max Characters limit

First bootstrapValidator script

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

Now let's check and validate the textarea with bootstrapValidator, need another wysihtml5 event change to check the changes and re-validate

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

So the Final Script will be

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

Fiddle Working Example

keep the button enable $('#setpolicyform').bootstrapValidator({// validation code}).on('error.field.bv', function(e, data) {if (data.bv.getSubmitButton()) {data.bv.disableSubmitButtons(false);}});

Collectives™ on Stack Overflow

How to validate wysiwyg editor using bootstrap validation

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related