如何在忽略Summernote编辑器字段验证后重新启用验证

Got it, let's break this down. The original fix you used ignores all elements inside .note-editor—which includes the hidden textarea that Summernote uses to store the actual content you want to validate. That's why your field validation stopped working. Here's how to fix this while keeping the JS error at bay:

The Problem with the Original Fix #

The line $(this).data('validator').settings.ignore = ".note-editor *"; tells your form validator to skip every element inside the Summernote container. But Summernote hides your original textarea (the one that gets submitted with the form) inside this container, so it gets excluded from validation too. We need to narrow down what we ignore.

Solution: Ignore Only the Troublesome Elements #

Instead of ignoring everything in .note-editor, we'll only ignore the parts of Summernote that cause the JS error—the toolbar buttons and the editable content area. This leaves your actual submission field (the hidden textarea) eligible for validation.

Update your bug fix function to this:

function summerNoteBugFix() { 
  $('form').each(function() { 
    const validator = $(this).data('validator');
    if (validator) {
      // Ignore only the toolbar and editable area, not the hidden textarea
      validator.settings.ignore = ".note-editable, .note-toolbar *";
    }
  }); 
}

Bonus: Preserve Original Ignore Rules #

If your form already had existing ignore settings (like hidden fields you intentionally don't validate), you can merge the Summernote exclusions instead of overwriting them:

function summerNoteBugFix() { 
  $('form').each(function() { 
    const validator = $(this).data('validator');
    if (validator) {
      // Keep existing ignore rules, add Summernote-specific ones
      const originalIgnore = validator.settings.ignore || '';
      const summernoteIgnores = ".note-editable, .note-toolbar *";
      validator.settings.ignore = originalIgnore 
        ? `${originalIgnore}, ${summernoteIgnores}` 
        : summernoteIgnores;
    }
  }); 
}

Make Sure It Runs at the Right Time #

Call this function after you initialize Summernote, either in the Summernote onInit callback or after your $(document).ready() setup:

$(document).ready(function() {
  // Initialize Summernote
  $('#your-summernote-field').summernote({
    // Your Summernote config here
    callbacks: {
      onInit: function() {
        // Apply the fix once the editor is ready
        summerNoteBugFix();
      }
    }
  });
});

This way, you'll still avoid the JS error when clicking Summernote menu buttons, but your form will validate the actual content stored in the hidden textarea like it should.

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