Snippets > jQuery > Validate TinyMce

Preview

HTML

<div class="demo-container">
<div class="demo-content"> 

<form action="" method="POST">
<div class="text-area-container">
<textarea name="textAreaDemo" id="textAreaDemo"></textarea>
</div> 
<div class="message-container">
<div id="message-content"></div> 
</div> 

<div class="submit-button-container">
<input id="submitButton" name="submit" type="submit" value="Submit" class="btn btn-primary float-end">
</div>
</form>
</div>
</div>

CSS

.demo-container {
margin: 0 auto;
max-width: 600px;
padding-top: 2rem;
}
.demo-content {
padding: 1em;
background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
border-radius: 10px;
}
.text-area-container{
margin-bottom: 10px;
}
.input-error-message {
background-color: rgba(255, 0, 0, 0.20);
font-weight: 700;
padding: 6px 20px;
border-radius: 6px;
}
.message-after-validation {
background-color: rgba(0, 255, 0, 0.30);
font-weight: 700;
padding: 6px 20px;
border-radius: 6px;
}
.demo-container-after-submit {
margin: 1em 0;
border-radius: 6px;
}
.demo-header-after-submit {
background-color: rgba(0, 0, 0, 0.15);
padding: 4px 10px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.content-after-submit {
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 10px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.message-container {
margin-top: 20px;
height: 30px;
}
.submit-button-container {
padding: 10px 0 35px 0;
}

$(document).ready(function(){
$('#submitButton').click(function(){

var tinymceDemoContentValue = tinymce.EditorManager.get('textAreaDemo').getContent();
if ((tinymceDemoContentValue) == '') {
$('#message-content').html('<span class="input-error-message">Please fill out the text area!</span>');
return false;
}

else {
$('#message-content').html('<span class="message-after-validation">Thank You!</span>'); // remove the text between quotes 

return false; // change this to true 
}

});

});