带有 CKEditor 的 jQuery 验证插件

Question

我知道以前有人问过这个问题，我已经阅读了所有以前的问题，但我仍然无法让 jQuery 验证器正确验证 CKEditor 字段。

我的表格如下：

<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>

两个文本区域都使用以下方法转换为 CKEditor 字段：

<script>
CKEDITOR.replace('question', { toolbar : 'forum' });
CKEDITOR.replace('answer', { toolbar : 'forum' });
</script>

当我尝试验证时，只有标题字段得到验证。我不确定我做错了什么。这是我用于验证的 javascript 代码（以下位于 jQuery 文档就绪函数中）。

$('#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;
    }

验证完成后，我将使用 $.post 方法而不是普通的 get 或 post 表单，这样我就可以在不重新加载的情况下更新我的页面。$.post 出现在验证方法之后，但我认为没有必要显示。

Answer 1

我终于能够让它工作了。CKEditor 在运行时隐藏文本区域并且 jQuery 验证器忽略隐藏元素。在验证功能中，这可以更改。所以我的新代码如下：

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;
}

我还添加了消息并在显示错误时修改了错误的元素和位置。我认为这可能对偶然发现此问题的其他人有所帮助。