jQuery Validation plugin with CKEditor

forms, html, javascript, jquery, validation

Solution

I was finally able to get it working. CKEditor hides the textareas when it runs and the jQuery validator ignores hidden elements. In the validate function, this can be changed. So my new code is below:

if ( ! $('#faq-form').validate({
    ignore: "input:hidden:not(input:hidden.required)",
    rules: {
        'faq-title': {
            required: true,
            minlength: 5
        },
        answer: {
            required: true,
            minlength: 20
        },
        question: {
            required: true,
            minlength: 20
        }
    },
    messages: {
        'faq-title': {
            required: "The title field is required"
        },
        answer: {
            required: "The answer field is required"
        },
        question: {
            required: "The question field is required."
        }
    },
    errorElement: "span",
    errorPlacement: function (error, element) {
        error.appendTo(element.prev());
    }
}).form()) {
    console.log('Form errors');
    return false;
}

I also added messages and modified the element and location of the errors when they are displayed. I figured that might be helpful to anyone else who stumbles across this.

Problem

I know this question has been asked before and I have read all the previous questions and I still can't get the jQuery validator to properly validate CKEditor fields. My form is below: ``` <form id="faq-form"> <p> <label>Title:</label> <input type="text" id="faq-title" name="faq-title" class="faq-title" /> </p> <p> <label for="question">Question:</label> <textarea name="question" id="question"></textarea> </p> <p> <label for="answer">Answer:</label> <textarea name="answer" id="answer"></textarea> </p> <p> <input id="submit-faq" name="submit-faq" type="submit" value="Submit" /> </p> </form> ``` Both textareas are converted to CKEditor fields using: ``` <script> CKEDITOR.replace('question', { toolbar : 'forum' }); CKEDITOR.replace('answer', { toolbar : 'forum' }); </script> ``` When I try to validate, only the title field gets validated. I am not sure what I am doing wrong. Here is my javascript code for validating (the following sits in a jQuery document ready function). ``` $('#faq-form').submit(function() { // Update textareas with ckeditor content for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].updateElement(); $.trim($('#' + i).val()); } // Validate the form if ( ! $('#faq-form').validate({ rules: { 'faq-title': { required: true, minlength: 5 }, answer: { required: true, minlength: 20 }, question: { required: true, minlength: 20 } } }).form()) { console.log('Form errors'); return false; } ``` Once the validation is complete, I will use a $.post method instead of a normal form get or post so I can update my page without reloading. The $.post comes after the validation method but I didn't think it was necessary to show.

Original source