Laravel模态框表单验证后无法显示错误信息的问题咨询

你的问题本质是两个原因叠加导致：一是默认表单同步提交会刷新页面，触发模态框重置关闭，后端返回的验证错误自然无法在已关闭的模态框中展示；二是你目前只做了后端验证，没有前端前置校验逻辑，所以提交前不会触发提示。 #

一、修复现有后端验证可在模态框展示的问题 #

第一步：修正现有代码的已知问题 #

• 两个输入框id重复，label的for属性和输入框id不匹配，会影响表单关联逻辑，同时补充起始读数的错误提示位：

<div class="mb-3" style="float:left; margin-left: 200px;">
  <label for="start_odo" style="width: 7em" class="col-form-label">Start ODO</label>
  <input type="number" style="width: 7em" name="start_odo" class="form-control @error('start_odo') is-invalid @enderror" id="start_odo" min="0" required>
  @error('start_odo')
  <span class="invalid-feedback">{{ $message }}</span>
  @enderror
</div>
<div class="mb-3">
  <label for="end_odo" class="col-form-label">End ODO</label>
  <input type="number" style="width: 7em" name="end_odo" class="form-control @error('end_odo') is-invalid @enderror" id="end_odo" min="0" required>
  @error('end_odo')
  <span class="invalid-feedback">{{ $message }}</span>
  @enderror
</div>

• 后端验证规则中end_odo末尾多了多余的竖线，修正：

$request->validate([
    'start_odo' => 'required',
    'end_odo' => 'required|gt:start_odo',
]);

第二步：改用AJAX提交表单，避免页面刷新模态框关闭 #

给表单加个id比如odoForm，提交时用AJAX请求，验证失败时把错误信息渲染到对应字段下，验证成功再手动关闭模态框：

// 示例用jQuery，也可替换为原生fetch/axios
$('#odoForm').submit(function(e) {
  e.preventDefault(); // 阻止默认同步提交
  let formData = $(this).serialize();
  // 提交前先清空之前的错误提示
  $('.invalid-feedback').text('');
  $('.form-control').removeClass('is-invalid');
  
  $.post('/你的提交接口地址', formData)
    .done(function(res) {
      // 提交成功逻辑：关闭模态框、刷新列表等
      $('#你的模态框id').modal('hide');
      // 其他成功操作
    })
    .fail(function(err) {
      // 验证失败返回422状态码，取出错误信息展示
      if (err.status === 422) {
        let errors = err.responseJSON.errors;
        for (let field in errors) {
          $(`input[name=${field}]`).addClass('is-invalid');
          $(`input[name=${field}]`).next('.invalid-feedback').text(errors[field][0]);
        }
      }
    });
});

二、实现提交前实时前端验证 #

不需要提交到后端，用户输入时就触发校验：

const startOdo = document.getElementById('start_odo');
const endOdo = document.getElementById('end_odo');
const endError = endOdo.nextElementSibling;

// 两个输入框输入时都触发校验
[startOdo, endOdo].forEach(input => {
  input.addEventListener('input', validateOdo);
});

function validateOdo() {
  const startVal = Number(startOdo.value);
  const endVal = Number(endOdo.value);
  if (endVal && startVal && endVal <= startVal) {
    endOdo.classList.add('is-invalid');
    endError.textContent = '结束读数必须大于起始读数';
    return false;
  } else {
    endOdo.classList.remove('is-invalid');
    endError.textContent = '';
    return true;
  }
}

// 表单提交时额外加一层校验
$('#odoForm').submit(function(e) {
  if (!validateOdo()) {
    e.preventDefault();
    return false;
  }
  // 后续AJAX提交逻辑
});

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