This is one way of doing it https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/custom-submit-aem-forms-article.html?lang=en   or you can do it this way https://experienceleague.adobe.com/docs/experience-manager-learn/forms/handling-af-form-submissions/submitting-ad...

so you have created a servlet and want to call the servlet on form submission?

I think this article should solve your use case https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/inline-images-from-dam.html?lang=en

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/inline-images-adaptive-forms.html?lang=en

Sorry not possible  you need designer to edit xdp  

you can use javascript to make the call. Create a client library and in that client library have your javascript make the call to the servlet. You can capture the response and display the value in the form using the guide bridge 

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/document-of-record-api-tutorial-use.html?lang=en

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/forms/faq.html?lang=en

You can easily change the number pattern to Internation/UK or a custom pattern using your own regular expression