向 jQuery .validate 添加方法以检查 SummerNote 文本区域是否为空

Question

我正在尝试向 jQuery .validate 添加一个方法来检查 Summernote（所见即所得编辑器）文本区域是否为空，并且我无法触发该方法（我放置在其中的警报不显示）。控制台没有错误。

方法是：

//Add validation method to check for an empty Award Description
$.validator.addMethod("htmlEditorEmpty", function(value, element) {
    alert("checking");
    return this.optional(element) || value.summernote('isEmpty');
}, "Please enter details");

这是由（此工作之前和之后的其他验证）调用的：

awardDescription: {
    htmlEditorEmpty: true,
    maxlength: 1500,
},

检查 HTML：

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    <div class="form-group">
        <div>
            <textarea class="summernote" id="awardDescription" name="awardDescription" rows="3"></textarea>
        </div>
    </div>
</div>

我已将其放入提交处理程序中：

if ($('#awardDescription').summernote('isEmpty')) {//using id
    alert('contents is empty1');
}

if ($('awardDescription').summernote('isEmpty')) {//using name
    alert('contents is empty2');
}

第一个有效（即仅在为空时显示），而第二个始终显示（即即使输入了值）。我包含此信息是因为我相信 .validate 使用名称而不是 id。我可能错了。

Answer 1

Summernote 有一个内置的测试。这是我正在使用的代码：

if ($('#summernote').summernote('isEmpty'))
{
  alert('editor content is empty');
}

您正在使用什么以及您的警报为何会触发。您的其他测试不是使用您正在使用的语法来测试有效的 ID 或名称。我认为浏览器会抛出错误或忽略您的第二个测试

要使用名称进行测试，请使用 val() $('form[name="???"] input[name="???"]').val(),

Answer 2

如果您正在使用[jQuery Validation][1]，那么您可以使用'addMethod'来验证summernote文本区域。

$("#form-id").validate({
    ignore: [],
    description: { summerNoteRequired: true},

    errorPlacement: function (error, element) {
        if(element.attr('name') == 'description') {
           $(error).insertBefore($('#description-error'));
       // you can create your own element to show error or using parent element you can manage error message
        }
    }
});

$.validator.addMethod('summerNoteRequired', function (value, element) {
    return !$('#description').summernote('isEmpty');
}, 'Description field is required');

注意：您可以根据您的要求使用：突出显示、取消突出显示和错误放置。 [1]：https://jqueryvalidation.org/