Add DOM manipulation code for the prechat form

assets/javascript/busHandler.js

@@ -10,4 +10,54 @@
             });
         }
     };
+
+    jQuery(document).ready(function() {
+        jQuery('div').on('DOMNodeInserted', '.form-list', function() {
+            const errorImages = jQuery('.pre-chat-container .error-image');
+            const form = jQuery('.pre-chat-container .form-list')[0];
+            const listItems = jQuery(form).find('li');
+
+            jQuery.each(listItems, function(index, item) {
+                const newSpan = document.createElement('span');
+                const label = item.getElementsByTagName('label')[0];
+
+                if (label) {
+                    const labelNodes = label.childNodes;
+
+                    for (let i=0; i<labelNodes.length; i++) {
+                        if (labelNodes[i].nodeType === Node.TEXT_NODE) {
+                            newSpan.appendChild(document.createTextNode(labelNodes[i].nodeValue));
+                            label.replaceChild(newSpan, labelNodes[i]);
+                        }
+                    }
+                }
+            });
+
+            const emailField = jQuery('input[data-essential="email_id"]');
+            if (emailField.val() !== '' && !isValidEmail(emailField.val())) {
+                emailField.siblings('label').children('.error-image').css('display', 'inline-block');
+            } else {
+                emailField.siblings('label').children('.error-image').css('display', 'none');
+            }
+
+            jQuery.each(errorImages, function(index, item) {
+                const field = jQuery(item).parent().siblings('textarea, input')[0];
+
+                if (item.style.display === 'inline-block') {
+                    jQuery(field).addClass('error');
+                } else {
+                    jQuery(field).removeClass('error');
+                }
+            });
+
+            setTimeout(function() {
+                jQuery('textarea.error, input.error').first().focus();
+            }, 50);
+        });
+    });
+
+    function isValidEmail(email) {
+        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+        return regex.test(email);
+    }
 })(this);

assets/javascript/hmcts-webchat.js

@@ -3,7 +3,7 @@ function parseText(text) {
 }
 
 function webchat_init(customParams) {
-    const version = '0.1.19';
+    const version = '0.1.20';
 
     const defaultParams = {
         uuid: '',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ctsc-web-chat",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Assets to support HMCTS CTSC web chat",
   "repository": {
     "type": "git",