Form validation by JavaScript in Laravel 10.x won't work

I made a custom validation in Laravel 10.x blade using JavaScript and Bootstrap 5 classes. When I press the submit button, the store action doesn’t work, and the form is reloaded empty without putting data in the database.

Here is the code of the JavaScript validation in the blade:

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

And the next is the code of the form inside the blade:

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

I have tried other JS submit methods, but they don’t work.
The problem is that the submit button starts but doesn’t go to the controller for storing the data inside the database. The form works well without any validation.

Any suggestions?