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;
}, "default errorMessage");
 
$('#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();
	}
	}
});