Add email address field validation

[MAILPOET-2804]

assets/js/src/common/set_from_address_modal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import ReactStringReplace from 'react-string-replace';
+import jQuery from 'jquery';
 import MailPoet from 'mailpoet';
 
 const showSetFromAddressModal = async () => {
@@ -31,6 +32,8 @@ const showSetFromAddressModal = async () => {
           id="mailpoet_set_from_address_modal_address"
           type="text"
           placeholder="from@mydomain.com"
+          data-parsley-required
+          data-parsley-type="email"
         />
 
         <input
@@ -41,6 +44,22 @@ const showSetFromAddressModal = async () => {
         />
       </div>
     ),
+    onInit: () => {
+      const saveButton = document.getElementById('mailpoet_set_from_address_modal_save') as HTMLInputElement;
+      const addressInput = document.getElementById('mailpoet_set_from_address_modal_address') as HTMLInputElement;
+      const addressValidator = jQuery(addressInput).parsley();
+
+      saveButton.addEventListener('click', async () => {
+        addressValidator.validate();
+        if (!addressValidator.isValid()) {
+          return;
+        }
+
+        const address = addressInput.value.trim() || null;
+        if (!address) {
+          return;
+        }
+    },
   });
 };