I have two inputs that are required in order for the form to be able to be submitted. The inputs are the latitude and longitude of an address. If i fill the fields manually, the required state of the field is updated and the form can be submitted.

However, if i fill it automatically by clicking on the map, the values are updated but the required state does not change. It stays red. To be more specific. If a user clicks on the map, or searches for an address, the marker will update its position and the fields will be updated with the new coordinates.

I am using Leaflet and GeoSearch so i use some of the events that are available to be able to achieve this. Here is my code so far:

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;
}

This will update the visible part of the fields as well as the hidden ones. The CMS i am working on, requires hidden fields for the actual data to be submitted.

The question:

How do i update the required state of the filled inputs?

Here a visual representation with the structure of the inputs and the problem:

The structure

The unchanged required state when the fields are filled

Best regards