为 Summernote 添加 JQuery 验证方法

Question

我正在尝试向 Summernote 添加一个验证器方法，以确保控件中有内容，并使用验证工具提示进行警告，如果控件中不存在数据，则停止提交表单。

我的表格是这样设置的：

@using (Html.BeginForm("AddNewFooThing", "Check", FormMethod.Post, new { @id = "newFooForm", autocomplete = "off" })){

    @Html.TextBoxFor(m => m.FooTitle, new { id = "FooTitle", @class = "form-control required", style = "width: 100% !important; margin-top:0px;text-transform: none;" })
        <div id="summernote" class="required full htmlEditorEmpty"></div>
}

呈现的 HTML：

    <input class="form-control required" id="FooTitle" name="FooTitle" style="width: 100% !important; margin-top:0px;text-transform: none;" type="text" value="">
    
   <div id="summernote" class="required full htmlEditorEmpty" data-val="true" data-val-htmleditorempty="Please enter Content" style="display: none;"><input class="form-control required" id="ConsentTitle" name="ConsentTitle" style="width: 100% !important; margin-top:0px;text-transform: none;" type="text" value=""></div>

在我的 $(document).ready 函数中，我正在创建一个新的 Validator 方法..

$(document).ready(function () { 
 

    $('#summernote').summernote({
                height: 150,                 // set editor height
                minHeight: null,             // set minimum height of editor
                maxHeight: null,             // set maximum height of editor
                focus: true,                 // set focus to editable area after initializing summernote
                disableDragAndDrop: true,
    
            });

      $(".htmlEditorEmpty").attr("data-val", "true").attr("data-val-htmlEditorEmpty", "Please enter Content");
        $.validator.addMethod('htmlEditorEmpty', function (value, element) {
            if ($('#summernote').summernote('isEmpty')) {
                return false;
            }
            return true;
        }, 'Please enter Content');
});

这就是我如何使用 JQuery Validator 为 $(document).ready() 中的有效/无效元素提供工具提示：

 $("#newFooForm").validate({
    showErrors: function (errorMap, errorList) {
        //debugger;
        // Clean up any tooltips for valid elements
        $.each(this.validElements(), function (index, element) {
            var $element = $(element);

            $element.data("title", "") // Clear the title - there is no error associated anymore
                .removeClass("error")
                .tooltip("destroy");
        });

        // Create new tooltips for invalid elements
        $.each(errorList, function (index, error) {
            debugger;
            var $element = $(error.element);

            $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                .data("title", error.message)
                .addClass("error")
                .tooltip(); // Create a new tooltip based on the error message we just set in the title
        });
    },
    submitHandler: function (form) {
        
            form.submit();
        
});

但是，当表单验证时，它似乎只将第一个字段 FooTitle 识别为在该字段上验证的有效表单，即使我已经为 summernote 控件添加了新方法。验证适用于 fooTitle 的文本框，但似乎忽略了我创建的将 summernote 控件注册为验证元素的方法。

有人可以帮我理解为什么吗？

谢谢