使用jQuery Validation插件验证Summernote编辑器的问题求助

我有一个包含远程验证字段的表单，相关JavaScript代码如下：

$("#myform").validate({
        rules: {
        mainfield: {
          remote:{
              url: "checksnote.php",
              type: "POST",
              data: {
                mainfield: function() {
                return $("#mainfield").summernote('isEmpty');
              }
            }
          }
        }
        },
        messages:{
          mainfield: {
            remote: "This field is required",
            //minlength: "Minimum Length is 10"
          }
        },
        submitHandler: function(form) {
          alert("Successfully submittable");
          console.log("Successfully submittable");
          form.submit();
        }
      });

问题是我完全无法得到任何响应，远程验证显示有效，但浏览器中看不到任何AJAX请求。mainfield是Summernote文本域，其他所有验证都能正常工作，请问为何远程验证甚至不发送请求？

更新：
我还尝试添加自定义验证方法，但也无效，因此转而尝试remote规则，只要能生效即可。以下是我的自定义方法代码，浏览器未显示任何错误：

$.validator.addMethod('sumnoteempty', function(value,element){
        //return false;
        if(element.summernote('isEmpty')){
          console.log("In summernote validation!");
          return false;
        }
        else {
          return true;
        }
      }, "Must enter summernote content");

规则设置如下：

rules: {
mainfield: {
    sumnoteempty: true
}
},
message:{
   sumnoteempty: "Field can not be empty"
}

我不清楚自己哪里出错了，控制台甚至没有显示日志信息。除了remote和自定义方法外，其他验证逻辑都运行良好。

问题根源 #

jQuery Validate默认依赖表单元素的value属性触发验证逻辑，但Summernote的内容存储在独立的iframe中，原生文本域的value不会实时同步，且内容变化时不会触发原生的change/keyup事件，导致Validate无法检测到内容变更，自然不会执行自定义验证或远程验证。

自定义验证修复步骤 #

1. 修正自定义方法的元素调用
   原生DOM对象无法直接调用Summernote方法，需先转为jQuery对象：

   $.validator.addMethod('sumnoteempty', function(value, element){
       // 将原生element转为jQuery对象
       if ($(element).summernote('isEmpty')) {
           console.log("In summernote validation!");
           return false;
       }
       return true;
   }, "Field can not be empty");
   

2. 绑定Summernote内容变更事件，同步并触发验证
   手动监听Summernote的内容变化，同步内容到原生文本域并触发Validate验证：

   $('#mainfield').summernote({
       // 保留你的原有Summernote配置
       callbacks: {
           onChange: function(contents, $editable) {
               // 同步编辑器内容到原生文本域
               $('#mainfield').val(contents);
               // 触发Validate对该字段的验证
               $('#mainfield').valid();
           }
       }
   });
   

3. 修正规则配置的拼写错误
   规则中的message应为messages（复数形式），否则错误提示无法生效：

   rules: {
       mainfield: {
           sumnoteempty: true
       }
   },
   messages:{
       mainfield: {
           sumnoteempty: "Field can not be empty"
       }
   }
   

远程验证修复步骤 #

若坚持使用remote规则，除了上述的事件同步步骤，还需调整remote的data逻辑：

• 不要返回isEmpty的布尔值，而是返回编辑器的实际内容，由后端判断是否为空
• 确保调用Summernote方法的是jQuery对象

修改后的remote规则：

rules: {
    mainfield: {
        remote: {
            url: "checksnote.php",
            type: "POST",
            data: {
                mainfield: function() {
                    // 返回Summernote的完整内容
                    return $("#mainfield").summernote('code');
                }
            }
        }
    }
}

后端checksnote.php需接收mainfield参数，判断内容是否为空，返回true（验证通过）或false（验证失败）。

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