使用just-validate库校验表单，正确填值后仍无法提交的问题

可能的原因 #

• lockForm: true的锁定机制冲突：开启lockForm时，JustValidate会在校验过程中锁定表单提交按钮或默认提交行为，部分版本中即使校验成功，手动调用submit()仍可能被锁定逻辑拦截。
• 表单提交方式的问题：代码中通过document.getElementById("app-form").submit()重新获取表单提交，可能存在元素引用不一致或未正确触发表单提交流程的情况。
• 未覆盖所有必填字段：如果表单中存在其他未添加校验规则的必填字段，会导致校验逻辑未完全通过，onSuccess回调不会触发。

解决步骤 #

1. 调整lockForm配置 #

将lockForm设为false，改为手动控制重复提交，避免库的锁定逻辑干扰：

const validation = new window.JustValidate('#app-form', {
  errorFieldCssClass: 'is-invalid',
  errorLabelStyle: {
    fontSize: '16px',
    color: '#dc3545',
  },
  successFieldCssClass: 'is-valid',
  successLabelStyle: {
    fontSize: '16px',
    color: '#20b418',
  },
  focusInvalidField: true,
  lockForm: false, // 修改为false
});

2. 优化onSuccess中的提交逻辑 #

使用回调参数event直接获取表单元素提交，避免重复DOM查询：

.onSuccess((event) => {
  // 禁用提交按钮防止重复提交
  const submitBtn = event.target.querySelector('button[type="submit"]');
  if (submitBtn) submitBtn.disabled = true;
  // 提交表单
  event.target.submit();
});

3. 校验所有表单字段 #

确保表单内所有需要校验的字段都通过addField添加了规则，比如邮箱、电话等字段必须补充对应校验规则，否则onSuccess不会触发。

额外检查 #

• 确认表单的提交按钮类型为type="submit"，否则无法触发JustValidate的校验流程：

<button type="submit">提交</button>

• 检查浏览器控制台是否有JS报错，比如表单元素不存在、JustValidate库未正确加载等问题。

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