Laravel 10.x中JavaScript表单验证致提交失效求助

在Laravel 10.x的Blade模板中，用JavaScript结合Bootstrap 5样式做了自定义表单验证，但点击提交按钮后store方法完全不执行，表单直接刷新为空，数据无法存入数据库。删掉验证逻辑后表单能正常提交，换过几种JS提交方式也没用。

现有JS验证代码 #

function checkInput() 
{
    var cognome = document.getElementById("cognome").value;
    var nome = document.getElementById("nome").value;
    var codFisc = document.getElementById("cod_fiscale").value;
    var area = document.getElementById("id_area").value;
    var check = 0;

    console.log("cognome: ", cognome);
    console.log("nome: ", nome);
    console.log("codFisc: ", codFisc);
    console.log("area: ", area);

    document.getElementById("cognome").classList.remove("is-invalid");
    document.getElementById("nome").classList.remove("is-invalid");
    document.getElementById("cod_fiscale").classList.remove("is-invalid");
    document.getElementById("id_area").classList.remove("is-invalid");  

    if (cognome == "")
    {
        document.getElementById("cognome").classList.add("is-invalid");
        check = 1;
    }

    if (nome == "")
    {
        document.getElementById("nome").classList.add("is-invalid");
        check = 1;
    }

    if (codFisc == "" || codFisc.length != 16)
    {
        document.getElementById("cod_fiscale").classList.add("is-invalid");
        check = 1;
    }        
    
    if (!id_area.value)
    {
        document.getElementById("id_area").classList.add("is-invalid");
        check = 1;
    }         

    console.log("check: ", check)    

    if (check == 0) 
    {
        document.getElementById("cognome").classList.remove("is-invalid");
        document.getElementById("nome").classList.remove("is-invalid");
        document.getElementById("cod_fiscale").classList.remove("is-invalid");
        document.getElementById("id_area").classList.remove("is-invalid");                        
        document.getElementById("formUtente").submit();
    }
}

现有表单代码 #

<form action="{{route('utenti.store')}}" method="post" name="formUtente" id="formUtente" role="form">
    @csrf                     
    <div class="form-group">
        <label for="Cognome">Cognome</label>
        <input type="text" class="form-control" id="cognome" name="cognome">
        <div class="invalid-feedback">Il cognome non deve essere vuoto.</div>
    </div>

    <div class="form-group">
        <label for="Nome">Nome</label>
        <input type="text" class="form-control" id="nome" name="nome">
        <div class="invalid-feedback">Il nome non deve essere vuoto.</div>
    </div>

    <div class="form-group">
        <label for="Codice Fiscale">Codice Fiscale</label>
        <input type="text" class="form-control" id="cod_fiscale" name="cod_fiscale">
        <div class="invalid-feedback">Il codice fiscale non deve essere vuoto e deve essere lungo 16 caratteri.</div>
    </div>

    <div class="form-group">
        <label for="Attivo">Attivo</label>
        <select class="form-select" id="attivo" name="attivo">
            <option value="1" selected>Si</option>
            <option value="0">No</option>
        </select>                                                        
    </div>

    <div class="form-group">
        <label for="Area">Area</label>
        <select class="form-select" id="id_area" name="id_area">
            <option value="">Selezionare un'area...</option>                                                                        
            @foreach ($areas as $area)
                <option value="{{$area->id}}">{{$area->descrizione}}</option>
            @endforeach
        </select>
        <div class="invalid-feedback">Selezionare un'area dalla lista.</div>                            
    </div>

    <div class="form-group">
        <label for="Cognome">Note</label>
        <textarea rows=5 class="form-control" id="note" name="note"></textarea>
    </div>

    <br>
    <button type="button" class="btn btn-primary" id="controlBTN" onclick="checkInput();">Inserisci nuovo utente</button>
</form>

解决建议 #

1. 修复JS变量未定义错误

你的JS代码里有个致命问题：判断id_area时用了!id_area.value，但id_area变量从未定义过——之前已经获取了area = document.getElementById("id_area").value，所以应该改用area变量判断：

// 错误写法
if (!id_area.value)

// 正确写法
if (!area)

这个错误会导致JS抛出异常，代码直接中断，后续的form.submit()根本执行不到，表单自然无法提交。

2. 优化验证逻辑（可选）

可以给输入值加trim()处理，避免用户输入空格就通过验证；同时用循环简化清除错误样式的代码，让代码更简洁：

function checkInput() {
    var cognome = document.getElementById("cognome").value.trim();
    var nome = document.getElementById("nome").value.trim();
    var codFisc = document.getElementById("cod_fiscale").value.trim();
    var area = document.getElementById("id_area").value;
    var check = 0;

    console.log("cognome: ", cognome);
    console.log("nome: ", nome);
    console.log("codFisc: ", codFisc);
    console.log("area: ", area);

    // 批量清除错误样式
    const fieldIds = ["cognome", "nome", "cod_fiscale", "id_area"];
    fieldIds.forEach(id => {
        document.getElementById(id).classList.remove("is-invalid");
    });

    if (cognome === "") {
        document.getElementById("cognome").classList.add("is-invalid");
        check = 1;
    }

    if (nome === "") {
        document.getElementById("nome").classList.add("is-invalid");
        check = 1;
    }

    if (codFisc === "" || codFisc.length !== 16) {
        document.getElementById("cod_fiscale").classList.add("is-invalid");
        check = 1;
    }        

    // 修复后的判断
    if (!area) {
        document.getElementById("id_area").classList.add("is-invalid");
        check = 1;
    }         

    console.log("check: ", check);    

    if (check === 0) {
        // 禁用按钮防止重复提交
        document.getElementById("controlBTN").disabled = true;
        document.getElementById("formUtente").submit();
    }
}

3. 改用Bootstrap 5原生表单验证（推荐）

Bootstrap 5自带表单验证功能，不用自己写大量JS，只需要给表单加novalidate属性，再用少量JS触发验证，代码更可靠：

<!-- 给表单加上novalidate属性 -->
<form action="{{route('utenti.store')}}" method="post" name="formUtente" id="formUtente" role="form" novalidate>
    @csrf                     
    <!-- 表单内容和之前一致 -->
    <!-- 把按钮改成type="submit"，无需onclick -->
    <br>
    <button type="submit" class="btn btn-primary">Inserisci nuovo utente</button>
</form>

<script>
(function () {
  'use strict'

  // 获取目标表单
  var form = document.getElementById('formUtente')

  // 绑定提交事件
  form.addEventListener('submit', function (event) {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }

    // 加上was-validated类，触发Bootstrap错误样式
    form.classList.add('was-validated')
  }, false)
})()
</script>

这种方式不需要自己写每个字段的验证逻辑，浏览器会处理必填项等基础验证，Bootstrap会自动显示invalid-feedback内容，更省心。

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