JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lcoawebservices.com/assets/ckeditor/ckeditor.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://lcoawebservices.com/assets/lcoastyles.css">
<form action="../../scripts/upload-job.php" method="post" id="add-job">
    <p class="req">All Fields are Required</p>
    <label>Description</label>
    <textarea name="answer[content]" class="required" id="editor1" data-error="#errElem1"></textarea>
    <script>
        CKEDITOR.replace('answer[content]');
    </script>
    <br />
    <div class="errorTxt"> <span id="errElem1"></span>

    </div>
    <input name="submit" type="submit" value="Submit Job" class="button" id="job-submit" />
    <input name="clear" type="reset" value="Clear Form" class="button" />
</form>

CSS

html, body {
    width: 100%;
}
form {
    margin: 10px 0 0 10px;
}
#job-upload-content h2 {
    font-size: 13px;
    font-weight: bold;
}
#header {
    text-align: left;
    padding: 0;
    margin: 0 auto;
    position: relative;
    height: 55px;
    width: 980px;
}
#job-upload-content {
    width: 980px;
    margin: 0 auto;
    text-align: left;
}
form#add-job {
    width: 500px;
}
span#remove, span#add {
    cursor: pointer;
    color: #ff6633;
    text-decoration: underline;
}
#remove-job {
    display: none;
}
p.req, label.error {
    font-size: 10px;
    color: red;
    font-style: italic;
}
input.error, select.error {
    border: 1px solid red;
}
#add-job input, #add-job select {
    display: inline-block;
    margin: 0 10px 20px 0 !important;
}
.error {
    display: inline-block;
    vertical-align: top;
}
select, select.error {
    margin: 0 10px 10px 0 !important;
}

JavaScript

$(document).ready(function () {
    jQuery.validator.addMethod("minlengthxo", function (value, element, param) {
        debugger
        originalVal = CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '');
        var length = $.isArray(originalVal) ? value.length : this.getLength(originalVal, element);
        return length >= param;
    }, function (params, element) {
        enteredLength = CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '').length;
        return 'You need input at least 18 characters, now you entered ' + enteredLength
    });

    $('#add-job').validate({
        errorPlacement: function (error, element) {
            var placement = $(element).data('error');
            if (placement) {
                //error.append(CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '').length);  
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        },
        ignore: [],
        rules: {
            "answer[content]": {
                required: function () {
                    CKEditorUpdate();
                },
                minlengthxo: 18
            }
        },
        /*messages:{
            "answer[content]": "You need input at least 18 characters, now you entered "
        }*/
    });

    function CKEditorUpdate() {
        for (instance in CKEDITOR.instances) {
            CKEDITOR.instances[instance].updateElement();
        }
    }
});