Bootstrap 3.3.7模态框内折叠表单提交异常问题求助

Hey there, let's break down what's causing that frustrating error and walk through actionable fixes.

The Root Cause #

That "invalid form control not focusable" error comes down to HTML5's native form validation. When you submit the MASTER form, your browser tries to validate all required input elements on the page—including those tucked away in the hidden SLAVE collapse panel. Since those SLAVE inputs are hidden (via Bootstrap's collapse styling), the browser can't focus on them to show validation feedback, hence the error. The SLAVE form submits fine because when it's active, the MASTER inputs are hidden but the browser only validates the SLAVE form's own elements.

Fix 1: Toggle novalidate for Hidden Forms (Quick Win) #

We can tell the browser to skip validation for the hidden form dynamically as we toggle between MASTER/SLAVE views:

1. First, add novalidate to the SLAVE form initially (since it starts hidden):

<form id="addzone-slave-form" action="/some/url" method="post" class="form-horizontal" role="form" novalidate>

2. Add this jQuery code to handle the collapse toggle:

// Listen for collapse panel show events
$('#zone-selector [data-toggle="collapse"]').on('shown.bs.collapse', function(e) {
  const activePanel = $(e.target);
  
  // If MASTER is shown: enable validation for MASTER form, disable for SLAVE
  if (activePanel.is('#add-master-zone')) {
    $('#addzone-form').removeAttr('novalidate');
    $('#addzone-slave-form').attr('novalidate', true);
  } 
  // If SLAVE is shown: enable validation for SLAVE form, disable for MASTER
  else {
    $('#addzone-slave-form').removeAttr('novalidate');
    $('#addzone-form').attr('novalidate', true);
  }
});

Fix 2: Dynamically Toggle required Attributes (More Precise) #

Instead of disabling entire form validation, we can add/remove the required attribute only for inputs in hidden panels:

1. Replace all your required attributes with data-required (so we have a marker to work with):

<!-- MASTER form example -->
<input type="text" name="zone-name" id="zone-name" class="form-control" placeholder="..." data-required>

<!-- SLAVE form example -->
<input type="text" name="slave-zone-name" id="slave-zone-name" class="form-control" placeholder="..." data-required>

2. Add this jQuery to sync required with panel visibility:

// Handle panel hide: remove required from hidden inputs
$('#add-master-zone, #add-slave-zone').on('hidden.bs.collapse', function() {
  $(this).find('input[data-required]').removeAttr('required');
})
// Handle panel show: add required to visible inputs
.on('shown.bs.collapse', function() {
  $(this).find('input[data-required]').attr('required', true);
});

This ensures only inputs in the currently active form are validated during submission.

Fix 3: Double-Check Form Structure (Critical Sanity Check) #

Make sure your two forms are completely independent (no nesting!). Your posted code looks correct, but it's easy to accidentally nest one form inside another when editing. Also, confirm each submit button is inside its corresponding form—this ensures the browser only validates the form tied to the submit button.

Bonus: Disable Native Validation Entirely (Last Resort) #

If you want full control over validation logic, add novalidate to both forms and write custom jQuery validation to check inputs only when their form is active. This is more work but useful if you need custom error messages or logic.

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