Laravel 10.x 中通过 JavaScript 进行表单验证将不起作用

问题描述 投票：0回答：2

我使用 JavaScript 和 Bootstrap 5 类在 Laravel 10.x Blade 中进行了自定义验证。当我按下提交按钮时，存储操作不起作用，并且表单会重新加载为空，而不会将数据放入数据库中。

这里是刀片中 JavaScript 验证的代码：

<script> 
        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();
                }
            }
</script>

接下来是刀片内部表格的代码：

                <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>

我尝试过其他JS提交方法，但都不起作用。 问题是提交按钮启动但没有转到控制器以将数据存储在数据库中。该表格无需任何验证即可正常运行。

有什么建议吗？

javascript laravel forms validation bootstrap-5
2个回答
0
投票

我建议使用 Laravel-jsvalidate 包，可以在以下链接中找到它：

https://github.com/proengsoft/laravel-jsvalidation

或使用composer安装

composer require proengsoft/laravel-jsvalidation

您只需将以下代码添加到表单刀片模板中即可：

<!-- Laravel Javascript Validation -->
<script type="text/javascript" src="{{asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

{!! JsValidator::formRequest('App\Http\Requests\MyFormRequest') !!}

如果删除 JavaScript 代码，控制器验证将正常运行。即

$validate = $request->validate([
        'cognome' => 'required|string|max:25',
        'nome' => 'required|string|max:20',
        ...........
    ]);
0
投票

提交时不要弄乱表单。使用内置验证而不是创建您自己的验证。在表单字段上使用 

required
属性。如果任何表单字段无效，则该表单将不会提交。在 
#cod_fiscale
上，我还使用属性 
maxLength
。它将限制输入的长度。您还可以使用其他属性进行验证。在这里找到它们：：输入（表单输入）元素

document.forms.formUtente.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('is-invalid');
}, true);

document.forms.formUtente.addEventListener('input', e => {
  if(e.target.validity.valid){
    e.target.classList.remove('is-invalid');
  }
});

document.forms.formUtente.addEventListener('change', e => {
  if(e.target.validity.valid){
    e.target.classList.remove('is-invalid');
  }
});
div.invalid-feedback {
  visibility: hidden;
}

input.is-invalid ~ div.invalid-feedback {
  visibility: visible;
}

select.is-invalid ~ div.invalid-feedback {
  visibility: visible;
}
<form action="/test" method="post" name="formUtente" id="formUtente" role="form">
  <div class="form-group">
    <label for="Cognome">Cognome</label>
    <input type="text" class="form-control" id="cognome" name="cognome" required>
    <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" required>
    <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" required maxLength="15">
    <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" required>
      <option value="">Selezionare un'area...</option>
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
    </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="submit" class="btn btn-primary" id="controlBTN">Inserisci nuovo utente</button>
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.