3

Me aparece que no estoy cerrando mi <form> pero si lo estoy cerrando casualmente cuando quito el div container deja de marcarme ese error pero si hago eso no estara bien acomodado los campos de mi pagina web, me imagino que ha de ser algo sencillo pero no encuentro cual es el detalle, si me podrian apoyar, aqui dejo mi codigo

<div class="container">
        <h1 th:text="${titulo}"
            class="text-secondary border border-success border-top-0 border-left-0 border-right-0"></h1>
        <!-- aqui en el th action ponemos la ruta que procesa el formulario, el form es el nombre del value en request mapping -->
        <!--  enm el th object ponemos el objeto de nuestro formulario en este caso seria cliente -->
        
        <form th:action="@{/form}" th:object="${cliente}" method="post">
        <div class="form-group">
                <label class="col-sm-2 col-form-label">Nombre</label>
                <div class="col-sm-6"> 
                    <input type="text" th:field="*{nombre}" class="form-control" />
                
                    <div class="form-group">
                <label class="col-sm-2 col-form-label">Apellido</label>
                    <input type="text" th:field="*{apellido}"
                    class="form-control" />
                </div>
                </div>
                
                    <div class="form-group">
                <label class="col-sm-2 col-form-label">Email</label>
                    <input type="text" th:field="*{email}"
                        class="form-control" />
                </div>
                </div>
                
                
                    <div class="form-group row">
                <label class="col-sm-2 col-form-label">Celular</label>
                    <input type="text" th:field="*{celular}"
                        class="form-control" />
                </div>
                </div>

                <div class="form-group row">
                <label class="col-sm-2 col-form-label">Fecha</label>
                <div class="col-sm-6">
                    <input type="text" class=" form-control " th:field="*{createAt}" />
                </div>
                </div>

                <!--  Aqui declaramos el boton el cual va realizar el metodo de guardar -->
                <div class="form-group row">
                <div class="col-sm-6">
                    <input type="submit" value="Crear Cliente"
                        class="btn btn-primary" />
                </div>
               </div>
                
            <input type="hidden" th:field="*{id}" />
        </form>
        </div>  
    
</body>
</html>

El error:

[2m2023-05-10T22:53:22.575-07:00[0;39m [31mERROR[0;39m [35m21336[0;39m [2m---[0;39m [2m[nio-8080-exec-1][0;39m [36morg.thymeleaf.TemplateEngine            [0;39m [2m:[0;39m [THYMELEAF][http-nio-8080-exec-1] Exception processing template "form": An error happened during template parsing (template: "class path resource [templates/form.html]")

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/form.html]")

error form

2
  • Revisa bien el código, tienes una etiqueta de cierres de div </div> de mas, no se como va estructurado tu código y por eso no te puedo decir cual sobra y por eso posiblemente falle porque estas cerrando el div anterior al form antes de cerrar el form
    – Suso
    Commented el 11 may. 2023 a las 6:56
  • 1
    Además de la buena respuesta que te ha dado @jachguate, te recomiendo utilizar herramientas para asegurar una buena indentation y cierres de etiquetas de HTML, tales como Code Beautify, FreeFormatter o un IDE con asistente IntelliSense como Visual Studio Code, además de extensiones útiles de éste como Prettier o Indent-Rainbow. Commented el 11 may. 2023 a las 12:52

1 respuesta 1

2

La respuesta simple a tu pregunta es:

El HTML que muestras en el ejemplo está mal formado.

Ante HTML mal formado, el comportamiento de los programas que lo procesan es indeterminado. Algunos reaccionarán de una manera (dando errores, por ejemplo) mientras otros de otra (tratando de armar un DOM con lo que logran interpretar para mostrar algo al usuario final, como los navegadores, por ejemplo).

Ahora, para ayudarte a identificar el problema:

Primero, terminas cerrando etiquetas </body> y </html> que no se abren nunca, pero asumo que eso fue un error al seleccionar el fragmento a incluir. Si no lo es, sobra decir que están de más o de menos, depende del punto de vista.

Dejando eso del lado, el ejercicio que hice fue ir identificando y eliminando las etiquetas que están correctamente formadas, de adentro para afuera. Es decir, tomar un fragmento como este:

                <div class="form-group row">
            <label class="col-sm-2 col-form-label">Celular</label>
                <input type="text" th:field="*{celular}"
                    class="form-control" />
            </div>

Identificar las etiquetas interiores, en este caso label e input y si están correctamente cerradas, eliminarlas, hasta eliminar también el div.

No está de más decir que la indentación es lamentable. NI el browser ni ningún otro interprete requiere que esto esté indentado. La indentación se coloca para que los humanos podamos entender más fácilmente la estructura. Esto fuera mucho más fácil de entender si estuviera así:

            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Celular</label>
                <input type="text" th:field="*{celular}"
                    class="form-control" />
            </div>

Al final de este ejercicio me quedé con esto:

<div class="container">
        <form th:action="@{/form}" th:object="${cliente}" method="post">
                </div>
        </form>
        </div>  
</body>
</html>

Creo que podemos coincidir en que debí quedarme solo con las etiquetas de cierre mencionadas antes, pero no fue así, debido a que hay errores en el HTML.

Veamos otro enfoque:

Otra forma en que, para mí, se hace fácil de ver el error es corrigiendo la indentación, de arriba hacia abajo, hasta donde se encuentre algo ilógico... en mi caso, logré llegar hasta aquí:

<div class="container">
    <h1 th:text="${titulo}"
        class="text-secondary border border-success border-top-0 border-left-0 border-right-0"></h1>
    <!-- aqui en el th action ponemos la ruta que procesa el formulario, el form es el nombre del value en request mapping -->
    <!--  enm el th object ponemos el objeto de nuestro formulario en este caso seria cliente -->
        
    <form th:action="@{/form}" th:object="${cliente}" method="post">
        <div class="form-group">
            <label class="col-sm-2 col-form-label">Nombre</label>
            <div class="col-sm-6"> 
                <input type="text" th:field="*{nombre}" class="form-control" />
                <div class="form-group">
                    <label class="col-sm-2 col-form-label">Apellido</label>
                    <input type="text" th:field="*{apellido}"
                        class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 col-form-label">Email</label>
                <input type="text" th:field="*{email}"
                    class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Celular</label>
            <input type="text" th:field="*{celular}"
                class="form-control" />
        </div>
    </div>  <---- ERROR!!!!

Es evidentemente que esa etiqueta de cierre </div> no va allí, pues ya no queda ningún div abierto.

Cuál es el código correcto, bueno, no hay manera de decirlo sin saber cuál es el diseño que buscas... esa ya es tu tarea.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.