Bootstrap模态框关闭后重置Ninja Form表单字段的实现方案问询

可行实现代码 #

直接将以下代码替换你现有的事件监听逻辑即可，两种重置方案搭配使用可兼容所有版本的Ninja Forms：

$('#vakancesModal').on('hidden.bs.modal', function(e) {
  // 方案1：操作Ninja Forms内置数据模型，清除内存中存储的字段值与错误信息
  const targetNfId = 5; // 对应你短代码中填写的ninja_form id
  if (typeof nfForms !== 'undefined' && nfForms[targetNfId]) {
    const formInstance = nfForms[targetNfId];
    // 重置所有字段值与字段级错误
    formInstance.get('fields').each(field => {
      field.set('value', '');
      field.set('errors', []);
    });
    // 重置表单全局提示与错误
    formInstance.set('errors', []);
    formInstance.set('submitSuccessMessage', '');
  }

  // 方案2：兜底DOM层重置，清除页面可见的输入内容、选中状态与错误样式
  const $formWrap = $(this).find('.sazinaties-ar-mums-form');
  $formWrap.find('input, textarea, select').not('[type="hidden"]').val('');
  $formWrap.find('input[type="checkbox"], input[type="radio"]').prop('checked', false);
  $formWrap.find('.nf-error, .nf-error-msg, .nf-success-msg').remove();
  $formWrap.find('.nf-field').removeClass('nf-error nf-success');
});

说明 #

• 方案1优先操作Ninja Forms的原生数据实例，从根源清除字段缓存，避免提交时出现历史值残留的问题
• 方案2作为兜底兼容，如果你使用的Ninja Forms版本没有暴露nfForms全局对象，仅用方案2也可满足常规重置需求
• 代码中的targetNfId需要和你短代码[ninja_form id=5]中的id值保持一致

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