Validate on keyup

ckanext/dataset_subscriptions/assets/js/processPhoneNumber.js

@@ -1,21 +1,26 @@
 const phoneInputField = document.querySelector("#field-phonenumber");
 const phoneInput = window.intlTelInput(phoneInputField, {
     preferredCountries: ["mw"],
+    formatOnDisplay: false,
     utilsScript:
         "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
 });
 
 const error = document.querySelector(".phonenumber.alert-error");
 
-function process(event) {
+function process() {
 
     const phoneNumber = phoneInput.getNumber();
     const emptyNumber = phoneNumber === "";
     if (emptyNumber || phoneInput.isValidNumber()) {
+        error.innerHTML = ""
+        error.style.display = "none";
         phoneInputField.value = phoneNumber;
+
     } else {
         error.style.display = "";
         error.innerHTML = `Invalid phone number. Please verify your input.`;
-        event.preventDefault();
     }
 }
+
+phoneInputField.onkeyup = process;

ckanext/dataset_subscriptions/templates/user/edit_user_form.html

@@ -3,8 +3,8 @@
 {% block extra_fields %}
   {% asset "ckanext-dataset-subscriptions/user-edit-js" %}
   {% asset "ckanext-dataset-subscriptions/user-edit-css" %}
-  <div class="alert phonenumber alert-error" style="display: none"></div>
   {{ form.input('phonenumber', label=_('Phone number'), id='field-phonenumber', type='tel', value=data.phonenumber, error=errors.phonenumber, placeholder=_('eg. +44 123123123'), classes=['control-medium'], is_required=false) }}
+  <div class="alert phonenumber alert-error" style="display: none"></div>
   {% call form.checkbox('activity_streams_sms_notifications', label=_('Subscribe to recieve SMS notifications'), id='field-activity-streams-sms-notifications', value=True, checked=data.activity_streams_sms_notifications) %}
   {% set helper_text = _("You will receive SMS notifications from {site_title} when you have new activities on your dashboard."|string) %}
   {{ form.info(helper_text.format(site_title=g.site_title), classes=['info-help-tight']) }}