动态生成的Semantic UI下拉菜单无法验证问题求助

问题根源 #

Semantic UI的表单验证会在初始化时扫描当前DOM中的元素并绑定验证规则，动态生成的元素不会自动被纳入验证范围，因此需要在元素添加后手动更新验证配置。

解决方案 #

以下两种方案任选其一，优先推荐方案二（更高效）：

方案一：重新初始化表单验证

在动态生成并初始化下拉菜单后，重新调用表单的验证初始化方法，传入包含新字段规则的完整配置：

function addDiv() {
  // 生成下拉菜单DOM
  const dropdownHtml = `
    <div class="field">
      <label>Language</label>
      <select name="language2" id="language2" class="ui dropdown">
        <option value="">Select Language</option>
        <option value="en">English</option>
        <option value="zh">Chinese</option>
      </select>
    </div>
  `;
  // 将下拉菜单添加到表单
  $('.ui.form').append(dropdownHtml);
  // 初始化Semantic UI下拉组件
  $('#language2').dropdown();

  // 重新初始化表单验证，包含原有字段+新字段规则
  const validationRules = {
    // 原有字段的验证规则
    // ...
    language2: {
      identifier: 'language2',
      rules: [
        {
          type: 'empty',
          prompt: 'Please select a language',
        }
      ]
    }
  };
  $('.ui.form').form(validationRules);
}

方案二：动态添加字段验证规则（推荐）

如果已在页面加载时初始化过表单验证，可使用addField方法单独为新元素添加规则，无需重新初始化整个表单：

// 页面加载时初始化表单验证（仅包含原有字段规则）
$(document).ready(function() {
  const validationRules = {
    // 原有字段的验证规则
    // ...
  };
  $('.ui.form').form(validationRules);
});

function addDiv() {
  // 生成并添加下拉菜单DOM
  const dropdownHtml = `
    <div class="field">
      <label>Language</label>
      <select name="language2" id="language2" class="ui dropdown">
        <option value="">Select Language</option>
        <option value="en">English</option>
        <option value="zh">Chinese</option>
      </select>
    </div>
  `;
  $('.ui.form').append(dropdownHtml);
  // 初始化下拉组件
  $('#language2').dropdown();

  // 动态添加新字段的验证规则
  $('.ui.form').form('addField', {
    identifier: 'language2',
    rules: [
      {
        type: 'empty',
        prompt: 'Please select a language',
      }
    ]
  });
}

注意事项 #

• 确保动态生成的下拉菜单name属性与验证规则中的identifier完全一致
• 若需多次添加下拉菜单，不要使用固定id，可改用类选择器或动态命名（如name="language[]"），并对应调整验证规则的identifier

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