JSFiddle - React, Tailwind, and code Playground

by ma soi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>

<form action="../../scripts/upload-job.php" method="post" name="myForm" id="myForm">
        <label>Description</label>
        <textarea name="editor1" id="editor1" class="required"></textarea>
        <script>
            CKEDITOR.replace( 'editor1' );
        </script>
        <br/>
						<input name="submit" type="submit" value="Submit" id="job-submit"/>
</form>

CSS

html, body {
	width: 100%;
	}

form {
margin: 10px 0 0 0;
}

#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(){
	$("#myForm").validate({
  	ignore: [],
    rules: { cke_1_contents: { required: function() { CKEDITOR.instances.editor1.updateElement(); }}},
		messages: { editor1: "vui long nhap"},		
		errorPlacement: function(error, element) {
			if(element.attr("id")=="cke_editor1"){ error.insertBefore("cke_editor1");}
			else { error.insertAfter(element);}	
		}		
	});
});