firewalletbrowser/templates/components/address.html

<div style="margin-top: 25px;">
    <label class="form-label">{{paramName}}</label>
    <input id="{{param}}" class="form-control" type="text" placeholder="Address or @domain" name="{{param}}" value="{{address}}" />
    <span id="addressValid"></span>
    <script>
        function checkAddress(inputValue) {
            // Make API request to "/checkaddress"
            var apiUrl = '/checkaddress?address=' + encodeURIComponent(inputValue);
            
            fetch(apiUrl)
              .then(response => response.json())
              .then(data => {
                // Update the content of the span with the response data
                var addressCheckSpan = document.getElementById('addressValid');
                addressCheckSpan.textContent = data.result; // You can replace 'addressInfo' with the actual property you receive from the API
              })
              .catch(error => {
                console.error('Error fetching data:', error);
              });
          }
        
          // Function to handle input field blur event
          function handleBlur() {
            var inputField = document.getElementById('{{param}}');
            var inputValue = inputField.value;
        
            // Check if the input value is not empty
            if (inputValue.trim() !== '') {
              checkAddress(inputValue);
            } else {
                var addressCheckSpan = document.getElementById('addressValid');
                addressCheckSpan.textContent = 'Invalid address';
            }
          }
        
          // Add a blur event listener to the input field
          var inputField = document.getElementById('{{param}}');
          inputField.addEventListener('blur', handleBlur);
    </script>
</div>