JSFiddle - React, Tailwind, and code Playground

by Cgull

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<script src="//cdn.ckeditor.com/4.3.1/standard/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.3.1/basic/adapters/jquery.js"></script>
    <form role="form" method="post" id="templateForm" enctype="multipart/form-data" class="box">
                            <input type="hidden" id="templateId" name="template_id" value="<!-- template_id -->">
                            <div class="form-group" id="template_title">
                                <label for="templateTitle">Template Title</label>
                                <input type="text" class="form-control" id="templateTitle" name="template_title">
                            </div>

                            <div class="form-group templateSubject">
                                <label for="templateSubject">Email Subject</label>
                                <input type="text" class="form-control" id="templateSubject" name="template_subject">
                            </div>

                            <div class="form-group" id="template_content">
                                <label for="templateContent">Template Content</label>
                                <textarea name="template_content" class="form-control" id="templateContent" style="height:300px"></textarea>
                            </div>

                            <div class="formBtn">
                                <button type="submit" class="btn btn-success btn-sm">Save</button>
                                <button type="button" class="btn btn-default btn-sm">Exit</button>
                            </div>
                        </form>

JavaScript

//CKEDITOR.replace('template_content');
$('#templateForm').bootstrapValidator({
        excluded: [':disabled'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            template_title: {
                validators: {
                    notEmpty: { message: "Please enter the template title" }
                }
            },
            template_content: {
                validators: {
                    notEmpty: { message: "Please enter the body" }
                }
            }
        }
    }).find('[name="template_content"]')
      .ckeditor()
      .editor
      // To use the 'change' event, use CKEditor 4.2 or later
      .on('change', function() {
          // Revalidate the bio field
          $('#templateForm').bootstrapValidator('revalidateField', 'template_content');
    })
    .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data;
            $form.ajaxSubmit({

                url: '/modules/bulkmail/ajax/edit_mail_template.ajax.php?template_id=' + template_id,
                beforeSerialize:function($Form, options){
                    /* Before serialize */
                    for ( instance in CKEDITOR.instances ) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                    return true;
                },
                beforeSubmit: function() {
                    $('.ajaxLoading').show();
                },
                success: function(data) {
                    $('.ajaxLoading').hide();
                    saved_dialog();
                }
        ...