Validate CKEditor using jQuery validate

By -

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.
  1. Jquery-1.11.1.js
  2. Jquery.Vaidate.js

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.

Comments

Post a Comment

Popular posts from this blog

Dynamic Query in LINQ using Predicate Builder

By -
Introduction This tutorial explains how to create a dynamic query using LINQ, Using Predicate Builder  LINQ to SQL dynamic query and Query with Entity Framework is easy. This concept first implement by albahari Description Predicate Builder is powerful LINQ expression which is mainly used when too many search filter parameter is there for querying data by writing dynamic query expression. We can write a query like Dynamic SQL. To know more about predicate delegate visit Predicate Delegate How To Implement Predicate Builder In this example, I have created an instance of PredicateBuilder with PatientInfo Model and add multiple OR and AND Condition based on their value. Predicate Builder automatically creates a dynamic query with Linq and combined into one Expression. dynamic-linq-sample.cs When We have a grid which filters record based on applied filter and filter parameter is in large number decision of use Dynamic LINQ result very high performance and mi
Read more

Common Asp.Net Tips and Tricks

By -
Image
Introduction This article is useful for all developer who faces this type of exception in their software development time. Article also provides tips for common error. I will provide you solution of common exception and issue facing during development. Tips and Tricks 1) 500 Error occurs while publishing website in IIS. Most configuration error occurs because of this.   Solution Figure1: Configuration Steps related to publish website in IIS Step 1 : Choose appropriate application pool and if target framework is missing  in application pool then follow below steps as per your pc. Open command Prompt using Run as administrator   Change the directory path for proper framework in command prompt CD C:\Windows\Microsoft.NET\Framework64\v4.0.30319 After changing directory path hit enter "aspnet_regiis i" this command register aspnet_regiis is available into directory. Step 2 : Select proper publish code   Step 3 : Check the Physical path
Read more

Payumoney Integration With Asp.Net

By -
Image
Introduction. PayUMoney is fastest growing Payment Gateway in India,which support all major banks and credit/debit card for payment settlement. PayUMoney is now provide support for enterprise hence its known as PayUBiz Payment Gateway. Description I have created test demo with PayUMoney  in Asp.Net webform which explains in various step as below.  Step1 :   Before we start first we need to configure PayuMoney or PayuBiz for our website,here is below description about technical details Production server : POST URL: https://secure.payu.in/_payment . To post successfully on production server, your merchant application status should be approved and you should use the key sent to you by PayUMoney after confirming the approval of your application. Test server: POSL URL: https://test.payu.in/_payment Key – JBZaLc (This key and salt value is provided by PayuMoney team after our payumoney account is configured and approved.) Salt – GQs7yium In above image Amo
Read more