CKEditor表单提交异常：填写内容后需点击两次提交按钮

问题核心：jQuery Validate 执行验证时，CKEditor 的内容还没同步到对应的 textarea 元素。第一次点击提交时，你在submitHandler里才同步内容，但此时本轮验证已经完成，Validate 仍判定字段为空；第二次点击时，textarea 已有同步后的内容，验证才通过。

快速修复方案 #

修改submitHandler，同步内容后手动触发一次表单验证，确认有效再提交：

$('#form').validate({
    ignore: [],
    rules: {
        title: {
            required: true
        },
        description: {
            required: true
        }
    },
    messages: {
        title: {
            required: '标题字段为必填项。'
        },
        description: {
            required: '描述字段为必填项。'
        }
    },
    submitHandler: function(form, event) {
        event.preventDefault();
        CKEDITOR.instances.description.updateElement();
        // 重新验证表单，确认所有字段有效后再提交
        if ($('#form').valid()) {
            form.submit();
        }
    }
});

更优方案（实时同步） #

监听 CKEditor 的内容变化事件，实时同步到 textarea，让 Validate 能实时检测内容，彻底避免验证延迟：

// 实时同步CKEditor内容到textarea
CKEDITOR.instances.description.on('change', function() {
    this.updateElement();
});

$('#form').validate({
    ignore: [],
    rules: {
        title: {
            required: true
        },
        description: {
            required: true
        }
    },
    messages: {
        title: {
            required: '标题字段为必填项。'
        },
        description: {
            required: '描述字段为必填项。'
        }
    },
    submitHandler: function(form, event) {
        event.preventDefault();
        form.submit();
    }
});

内容的提问来源于stack exchange，提问作者omkar