如何为EasyWebinar嵌入表单添加必填字段验证提示信息？

方案1：用MutationObserver监听动态生成的表单元素 #

第三方表单脚本是异步渲染DOM的，普通DOM就绪事件无法捕获到表单元素，这是之前jQuery验证失效的核心原因。用MutationObserver可以监听容器内的DOM变化，等表单字段生成后再绑定验证逻辑：

// 定位表单容器
const formContainer = document.querySelector('.ewp_form_container');

// 创建DOM变化观察者
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 查找所有必填字段
    const requiredFields = formContainer.querySelectorAll('input[required], select[required], textarea[required]');
    if (requiredFields.length === 0) return;

    // 给每个必填字段绑定验证事件
    requiredFields.forEach(field => {
      // 失去焦点时触发验证
      field.addEventListener('blur', () => validateRequired(field));
      // 输入时清除错误提示
      field.addEventListener('input', () => removeErrorHint(field));
    });

    // 监听表单提交，阻止错误提交
    const form = formContainer.querySelector('form');
    if (form) {
      form.addEventListener('submit', (e) => {
        let hasError = false;
        requiredFields.forEach(field => {
          if (!validateRequired(field)) hasError = true;
        });
        if (hasError) e.preventDefault();
      });
    }

    // 停止监听，避免重复绑定
    observer.disconnect();
  });
});

// 配置观察者：监听子元素新增
observer.observe(formContainer, { childList: true, subtree: true });

// 验证必填字段并添加提示
function validateRequired(field) {
  if (!field.value.trim()) {
    let errorHint = field.parentNode.querySelector('.required-hint');
    if (!errorHint) {
      errorHint = document.createElement('span');
      errorHint.className = 'required-hint';
      errorHint.textContent = '此字段为必填项';
      errorHint.style.cssText = 'color:#dc3545;font-size:12px;margin-top:4px;display:block';
      field.parentNode.appendChild(errorHint);
    }
    errorHint.style.display = 'block';
    return false;
  }
  removeErrorHint(field);
  return true;
}

// 移除错误提示
function removeErrorHint(field) {
  const hint = field.parentNode.querySelector('.required-hint');
  if (hint) hint.style.display = 'none';
}

方案2：纯CSS实现必填提示（无需JS） #

利用CSS伪类直接控制提示显示，完全不受第三方脚本干扰：

/* 隐藏默认提示，自定义样式 */
.required-hint {
  display: none;
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

/* 当必填字段为空且已被交互时，显示提示 */
.ewp_form_container input[required]:invalid:not(:placeholder-shown) + .required-hint,
.ewp_form_container select[required]:invalid:not(:placeholder-shown) + .required-hint,
.ewp_form_container textarea[required]:invalid:not(:placeholder-shown) + .required-hint {
  display: block;
}

/* 给无占位符的必填字段添加默认占位符（避免页面加载就显示提示） */
.ewp_form_container input[required]:not([placeholder]) {
  placeholder: ' ';
}

如果不想额外添加DOM元素，也可以用伪元素直接生成提示：

.ewp_form_container input[required]:invalid:not(:placeholder-shown)::after {
  content: '此字段为必填项';
  position: absolute;
  bottom: -18px;
  left: 0;
  color: #dc3545;
  font-size: 12px;
}

方案3：检查EasyWebinar内置配置 #

部分第三方表单工具提供内置的必填提示开关，你可以：

• 登录EasyWebinar后台，找到对应Webinar的表单设置项
• 查找「必填字段提示」「错误提示样式」相关配置
• 开启后重新生成嵌入代码替换现有代码即可

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