¡DOM me está volviendo loco! Hice todo bien pero aún no funcionaba. Estoy tratando de validar el formulario en Jinja a través de DOM o Javascript usando innerHTML antes de enviar el formulario en un matraz. Sé que estoy haciendo lo correcto, pero el div no cambia. Necesito su ayuda chicos. Qué estoy haciendo mal ?

{% extends "layout.html" %}
{% block content %}
                    <form action="" method="post" enctype="multipart/form-data" class="form">
                <fieldset>
                <legend> <h5>{{ legend }} </h5></legend>
                     {{ form.hidden_tag() }} 

                      <div class="form-group">
                      {{ form.course_name.label(for="name") }}<br>
                      {% if form.course_name.errors %}
                        {% for error in form.course_name.errors %}

                            {{ form.course_name(size=100, class="form-control", id="name", placeholder="Enter course name") }}<br>
                            <span style="color: red;">{{ error }}</span>
                            <h1 id="nameeee" style="color: red;"></h1>

                        {% endfor %}   
                      {% else %}
                          {{ form.course_name(size=100, class="form-control", id="name", placeholder="Enter course name") }}<br>
                      {% endif %}   
                      
                      </div>


                      <p>
                      {{ form.submit(class="btn btn-primary", id="submit") }}
                      
                      </p>

 </form>

<script type="text/javascript">
    const name_course = document.getElementById('name');
    const submit = document.getElementById('submit');
    const name = document.getElementById('nameeee')
    



    submit.addEventListener('click', () =>{
        
        if (name_course.value.length < 1){
          name.textContent = "Name must not be empty";
          alert(name_course.value.length);
      };
        
    });
</script>
{% endblock %}
0
Ozaveshe Balogun 23 jun. 2020 a las 17:45

2 respuestas

La mejor respuesta

No funcionó porque el h1 se colocó dentro del bucle. Así que tuve que sacar el h1 del circuito.

<h1 id="nameeee" style="color: red;"></h1>

0
Ozaveshe Balogun 2 jul. 2020 a las 07:11

No estoy seguro de lo que quiere decir con right thing but the div doesn't change.. Expanda esto en los comentarios si la solución propuesta a continuación no resuelve el problema.

Creo que en este caso el render HTML jinja

{{ form.submit(class="btn btn-primary", id="submit") }}

No logra el propósito de enviar el formulario al back-end. No es equivalente a tener un botón submit, por lo que

<button type="submit"> Send </button>

Que realiza el método y la acción establecidos en su etiqueta de apertura form. Pruebe con esto <p>{{ form.submit() }}</p> y vea si resuelve el problema.

0
AzyCrw4282 23 jun. 2020 a las 21:02