Validate CKEditor using jQuery validate
Introduction
In this article we learn about how to validate CKEditor control using jquery validate
Prerequisite. Below JavaScript library are used to validate CKEditor control.Description
When we configure CKEditor control in our html page it render in Iframe so jquery validate library fails to check weather this control is empty or not and we face issue while validating this control. Let’s see example:
HTML:
<form> <textarea id="txtDemo1" name="txtDemo1"></textarea> <textarea id="txtDemo2" name="txtDemo2"></textarea> <input type="submit" value="submit"> </form>
Let’s assume we have configured CKEditor for both text area control and both fields are required in system. For validation we have implemented following validation for both control as shown below:
SCRIPT:
$("form").validate({ ignore: [], rules: { txtDemo1: { ckrequired: true //Custom required field } , txtDemo2: { required: true //Default required field fails } }});
Extention method for check CKEditor Control
jQuery.validator.addMethod("customfunctionanme",validationfunction,validationmessage);
jQuery.validator.addMethod("ckrequired", function (value, element) { var idname = $(element).attr('id'); var editor = CKEDITOR.instances[idname]; var ckValue = GetTextFromHtml(editor.getData()) .replace(/<[^>]*>/gi, '').trim(); if (ckValue.length === 0) { //if empty or trimmed value then remove extra spacing to current control $(element).val(ckValue); } else { //If not empty then leave the value as it is $(element).val(editor.getData()); } return $(element).val().length > 0; }, "This field is required");
function GetTextFromHtml(html) {
var dv = document.createElement("DIV");
dv.innerHTML = html;
return dv.textContent || dv.innerText || "";
}
From above code we have used both default required validation and ckrequired custom required method by extending jquery validate library. Along with custom method we have use one JavaScript utility function to extract text from html value after that we have trimmed value to validate trim value with extra space.
Hope this article is useful for validate CKEditor control as well as create custom validation method using jquery validate.
Conclusion
In this article we learn about validating CKEditor using custom jquery validation method.
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
ReplyDeleteNice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision.
ReplyDeleteJava training in Chennai
Java training in Bangalore
Java online training
ReplyDeleteThis is quite educational arrange. It has famous breeding about what I rarity to vouch. Colossal proverb.
This trumpet is a famous tone to nab to troths. Congratulations on a career well achieved. This arrange is synchronous s informative impolites festivity to pity. I appreciated what you ok extremely here
Selenium training in bangalore
Selenium training in Chennai
Selenium training in Bangalore
Selenium training in Pune
Selenium Online training
It’s really a Great Post .Looking for Some More Stuff
ReplyDeletebest aviation academy in Chennai
air hostess course in Chennai
Airline Courses in Chennai
airport ground staff training in Chennai
medical coding training institute in Chennai
fashion technology courses in Chennai
best interior design courses in Chennai