up handle overrides with edit questions

templates/public/edit.html.twig

@@ -13,6 +13,12 @@
             width: 20px;
             height: 20px;
         }
+        .is-invalid {
+            border: 1px solid red;
+        }
+        .is-invalid #validation_messages {
+            color: red;
+        }
     </style>
 {% endblock %}
 
@@ -64,32 +70,20 @@
                                             <label for="commerce_tag_value__name">{{'display.keys.name'|trans}}</label>
                                             </div>
                                             <div class="col-md-5">
-                                                <input type="text" class="form-control" name="commerce_tag_value__name" value=" {% if commerce.tags_converted.name is defined %}{{ commerce.tags_converted.name }}{% endif %}">
+                                                <input type="text" class="form-control" name="commerce_tag_value__name" value=" {% if commerce.tags_converted.name is defined %}{{ commerce.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
                                             </div>
                                         </div>
-
-                                        {# cas d'une mairie
-                                        #}
-
-                                        {# {% if commerce.tags_converted.amenity is defined %}
-                                            {% if commerce.tags_converted.amenity == 'townhall' %}
-                                                {% include 'public/edit/townhall.html.twig' %}
-                                            {% endif %}
-
-                                            {% if commerce.tags_converted.amenity == 'restaurant' %}
-                                                {% include 'public/edit/restaurant.html.twig' %}
-                                            {% endif %}
-                                        {% endif %} #}
+ 
                                 </div>
                             </div>
 
-                            
                             {% include 'public/edit/ask_angela.html.twig' %}
-                            {# {# {% include 'public/edit/wheelchair.html.twig' %} #}
-                            {# {% include 'public/edit/opening_hours.html.twig' %}
-                            {% include 'public/edit/address.html.twig' %} #} #}
+                            {% include 'public/edit/wheelchair.html.twig' %}
+                            {% include 'public/edit/opening_hours.html.twig' %}
+                            {% include 'public/edit/address.html.twig' %}
                             {% include 'public/edit/tags.html.twig' %}
                             
+                            <div id="validation_messages"></div>
                             <button type="submit" class="btn btn-primary">{{ 'display.submit'|trans }}</button>
                         </form>
                     {% endif %}
@@ -107,7 +101,6 @@
                 <a href="https://www.openstreetmap.org/node/{{ commerce_overpass['@attributes'].id }}" target="_blank">{{ 'display.view_on_osm'|trans }}</a>
             </div>
 
-            {# {{ dump(commerce_overpass) }} #}
         </span>
 
         <div class="disclaimer p-3">
@@ -138,7 +131,50 @@
     {{ parent() }}
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
      <script>
-        {% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty %}
+
+        // Validation du formulaire avant envoi
+        document.querySelector('form').addEventListener('submit', function(e) {
+            let errors = [];
+            // Réinitialiser les classes d'erreur
+            document.querySelectorAll('.is-invalid').forEach(input => {
+                input.classList.remove('is-invalid');
+            });
+            
+            // Vérification du nom
+            const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
+            if (!nameInput.value.trim()) {
+                errors.push("Le nom de l'établissement est obligatoire");
+                nameInput.classList.add('is-invalid');
+            }
+
+            // Vérification de l'email 
+            const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
+            if (emailInput && emailInput.value) {
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(emailInput.value)) {
+                    errors.push("L'adresse email n'est pas valide");
+                    emailInput.classList.add('is-invalid');
+                }
+            }
+
+            // Vérification du téléphone
+            const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
+            if (phoneInput && phoneInput.value) {
+                const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
+                if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
+                    errors.push("Le numéro de téléphone n'est pas valide");
+                    phoneInput.classList.add('is-invalid');
+                }
+            }
+
+            // Affichage des erreurs si présentes
+            if (errors.length > 0) {
+                e.preventDefault();
+                document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
+                document.querySelector('#validation_messages').classList.add('is-invalid');
+            }
+        });
+        {% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
         mapboxgl.accessToken = '{{ mapbox_token }}'; 
         map = new mapboxgl.Map({
             container: 'map',