Best way to validate a SharePoint Enhanced Rich text field using JQuery.

Recently I got a requirement to create a new Enhanced Rich text field in my existing application. We also need to validate that its not blank. So at first I know, it will be bit complex due to any obvious selector unavailability for Enhanced Rich Text Field in SharePoint. I searched a lot and found no. of suggestion but nothing seems very logical to me and also did not work for me. Then I have written below script to deal with it.

//Rich Text Field Validation Code

var RichtTxtContent = $('nobr:contains("Rich Text Field Title")').closest('tr').find('div[id$="TextField_inplacerte"]').text();
if( RichtTxtContent.length === 1 ||  RichtTxtContent.length === 0)
{
alert("Please enter  Richt Text Content .");
SetRemoveStyleOnFocus($('nobr:contains("Rich Text Field Title")').closest('tr').find('div[id$="TextField_inplacerte"]'));
return false;

I have just selected whole Row with the Rich Text Field Title, then found out a div with the text its always append it into this div client Id. Refer below screen shot to see the ID.

Then we need to check length as by default its set to 1. We need to compare with both 1 and 0.


Here is a function which will make sure that field is highlighted with focus whenever its blank. You can write your own classes to highlight it.

function SetRemoveStyleOnFocus(inputField)
{
$(inputField).focus(function() {
    $(this).addClass("focus");
});
$(inputField).blur(function() {
    $(this).removeClass("focus");
    });

    $(inputField).focus();
}

We just need to call this piece of code on Pre Save event of a SharePoint OOB New\Edit form or any other event as per need.