formvalidation.io exclude插件早期IE版本隐藏字段兼容问题求助

I’ve run into similar compatibility quirks with older IE versions and FormValidation’s plugins—here’s what’s likely happening: the Exclude plugin relies on modern DOM visibility detection that doesn’t work reliably in older IE (like the Win10 IE 15 you tested). Older IE handles computed styles and dynamic element visibility differently, so the plugin fails to recognize hidden fields and skips validation entirely until those fields are shown.

Here are three actionable fixes/workarounds you can implement:

1. Manually Mark Hidden Fields as Valid on Submit #

This is the quickest fix. Before FormValidation runs its checks, we’ll force all hidden fields to be marked as valid, so they don’t block the form submission or prevent the error popup from appearing.

Add this code alongside your existing FormValidation setup:

const form = document.getElementById('your-form-id');
const fv = FormValidation.formValidation(form, {
  // Your existing FormValidation configuration here
  plugins: {
    exclude: {
      enabled: true,
      // Your existing exclude plugin options
    }
  }
});

// Intercept the submit event to pre-validate hidden fields
form.addEventListener('submit', function(e) {
  // Adjust the selector to match how you hide fields (e.g., class, type)
  const hiddenFields = form.querySelectorAll('[type="hidden"], .hidden');
  
  hiddenFields.forEach(field => {
    // Mark each hidden field as valid to bypass validation checks
    fv.updateStatus(field.getAttribute('name'), 'Valid');
  });
});

2. Replace the Exclude Plugin with a Custom Callback Validator #

If you want more control and to avoid relying on the plugin’s buggy visibility detection, replace the Exclude plugin with a custom callback validator for each field that should be skipped when hidden.

Here’s how to set this up for your fields:

FormValidation.formValidation(document.getElementById('your-form-id'), {
  fields: {
    // Your visible required fields (fullname, company)
    fullname: {
      validators: {
        notEmpty: {
          message: 'Please enter your full name'
        }
      }
    },
    company: {
      validators: {
        notEmpty: {
          message: 'Please enter your company name'
        }
      }
    },
    // Example hidden field that should be skipped when not visible
    additional_info: {
      validators: {
        callback: {
          message: 'Please enter additional info',
          callback: function(input) {
            // IE-compatible check for hidden elements (uses offset dimensions)
            const isHidden = input.offsetWidth === 0 && input.offsetHeight === 0;
            
            // Skip validation if hidden; run normal checks if visible
            return isHidden ? true : input.value.trim() !== '';
          }
        }
      }
    }
  }
});

3. Patch the Exclude Plugin’s Visibility Detection Logic #

If you prefer to keep using the Exclude plugin, you can override its internal isExcluded method to use an IE-compatible visibility check. This fixes the root cause of the plugin failing in older IE.

Add this code after loading FormValidation and the Exclude plugin:

// Override the Exclude plugin's visibility check to support older IE
FormValidation.Plugin.Exclude.prototype.isExcluded = function(field) {
  const element = field.element;
  let isHidden = false;

  // Check inline display style first
  if (element.style.display === 'none') {
    isHidden = true;
  }
  // For older IE, use currentStyle instead of getComputedStyle
  else if (element.currentStyle) {
    isHidden = element.currentStyle.display === 'none';
  }
  // Fallback to offset dimensions (works for most hidden elements)
  else {
    isHidden = element.offsetWidth === 0 && element.offsetHeight === 0;
  }

  // Keep the original logic of checking excluded field names
  return isHidden || this.options.fields.includes(field.name);
};

Which Option Should You Choose? #

• Option 1: Best for a fast, no-fuss fix when you don’t want to rewrite your validator config.
• Option 2: Ideal if you want full control over validation logic and avoid plugin dependencies.
• Option 3: Perfect if you want to keep using the Exclude plugin and fix its compatibility for all forms on your site.

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