No puedo validar mi formulario a pesar de tener el script tanto en la página como en mi diseño repetitivo. He intentado mover las etiquetas a diferentes lugares, pero la validación del lado del servidor es la única parte que funciona... el formulario no ejecutará la validación del lado del cliente.

 <% layout('layouts/boilerplate') %> <div class="row"> <h1 class="text-center">Create Artist Profile</h1> <div class="col-6 offset-3"> <form action="/artists/new" method="POST" novalidate class="validated-form" enctype="multipart/form-data"> <div class="mb-3"> <label class="form-label" for="email">Email</label> <input class="form-control" type="email" id="email" name="email" placeholder="name@domain.com" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="mb-3"> <label for="formFile" class="form-label">Upload band photo</label> <input class="form-control" type="file" id="image" name="image" multiple="false"> </div> <div class="mb-3"> <button class="btn btn-success">Create Profile</button> </div> <a href="/artists">All artists</a> </form> </div> </div>

Aquí está la etiqueta del script del cuerpo de mis diseños/boilerplate.ejs

 <script> (function () { 'use strict' bsCustomFileInput.init() // Fetch all the forms we want to apply custom Bootstrap validation styles to const forms = document.querySelectorAll('.validated-form') // Loop over them and prevent submission Array.from(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated') }, false) }) }) </script>

¿Alguna idea de lo que estoy haciendo mal con este formulario?