Tengo dos entradas que se requieren para poder enviar el formulario. Las entradas son la latitud y la longitud de una dirección. Si completo los campos manualmente, el estado requerido del campo se actualiza y se puede enviar el formulario.

Sin embargo, si lo lleno automáticamente haciendo clic en el mapa, los valores se actualizan pero el estado requerido no cambia. Se mantiene rojo. Para ser más especifico. Si un usuario hace clic en el mapa o busca una dirección, el marcador actualizará su posición y los campos se actualizarán con las nuevas coordenadas.

Estoy usando Leaflet y GeoSearch, así que uso algunos de los eventos que están disponibles para poder lograr esto. Aquí está mi código hasta ahora:

 let map = L.map('map').setView([lat, lon], 18); var marker = new L.marker([lat, lon]).addTo(map) map.on('geosearch/showlocation', function (e) { if (marker) { marker = updateFields(e.marker._latlng, marker, map); } else { marker = new L.Marker(e.marker._latlng).addTo(map); } }); setTimeout(() => { map.invalidateSize(true); }); map.on('click', function (e) { if (marker) { marker = updateFields(e.latlng, marker, map); } else { marker = new L.Marker(e.latlng).addTo(map); } }); ... function updateFields(coordinates, marker, map) { /* get the coordinates inputs*/ let hiddenLng = document.querySelector("input[name*='[marker_longitude]']"); let userLng = document.querySelector("input[data-formengine-input-name*='[marker_longitude]']"); let hiddenLat = document.querySelector("input[name*='[marker_latitude]']"); let userLat = document.querySelector("input[data-formengine-input-name*='[marker_latitude]']"); map.removeLayer(marker); marker = new L.Marker(coordinates).addTo(map); hiddenLng.value = coordinates.lng.toFixed(7); userLng.value = coordinates.lng.toFixed(7); hiddenLat.value = coordinates.lat.toFixed(7); userLat.value = coordinates.lat.toFixed(7); return marker; }

Esto actualizará la parte visible de los campos así como los ocultos. El CMS en el que estoy trabajando requiere campos ocultos para que se envíen los datos reales.

La pregunta:

¿Cómo actualizo el estado requerido de las entradas completas?

Aquí una representación visual con la estructura de las entradas y el problema:

La estructura

El estado requerido sin cambios cuando se llenan los campos

Saludos