Changeset 33114

Timestamp:

2019-05-28T19:56:46+12:00 (5 years ago)

Author:

ak19

Message:

Basic sanity checking for berrybasket email: to and body may not be empty. Basic test for To being an email address. Added HTML5 input checking on these fields but, while they highlighted invalid fields in red outlines, they didn't prevent the send button from sending invalid data with a success message. So needed the Javascript sanity checking too.

Location:

main/trunk/greenstone3/web

Files:

• WEB-INF/classes/interface_default.properties (modified) (1 diff)
• interfaces/default/js/berrybasket/berrycheckout.js (modified) (5 diffs)

main/trunk/greenstone3/web/WEB-INF/classes/interface_default.properties

@@ -307 +307 @@
 berry.send_success=Sending mail succeeded
 berry.send_fail=Sending mail failed
+berry.invalid_to_address_empty=The To address field cannot be empty.
+berry.invalid_to_address=The To address field must contain an email address.
+berry.invalid_msg_body_empty=The message body text field cannot be empty.
 
 ##################################

main/trunk/greenstone3/web/interfaces/default/js/berrybasket/berrycheckout.js

@@ -381 +381 @@
         input.setAttribute("id", item);
         input.setAttribute("class", "mailinput");
-        input.setAttribute("type", "text");
+        if(item === "address") {
+            input.setAttribute("type", "email"); // https://html5-tutorial.net/form-validation/validating-email/
+            input.required = true; // https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript
+        } else {
+            input.setAttribute("type", "text");
+        }
         td.appendChild(input);
         tr.appendChild(td);
@@ -437 +442 @@
         input.setAttribute("id", item);
         input.setAttribute("class", "mailinput");
-        input.setAttribute("type", "text");
+        if(item === "address") {
+            input.setAttribute("type", "email"); // https://html5-tutorial.net/form-validation/validating-email/
+            input.required = true; // https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript
+        } else {
+            input.setAttribute("type", "text");
+        }
         td.appendChild(input);
         tr.appendChild(td);
@@ -506 +516 @@
     var parea = document.createElement('textarea');
     parea.id = 'pretextarea';
-
+    parea.required = true; // https://www.w3schools.com/tags/att_textarea_required.asp
+            // and https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript
+    
     parent.appendChild(parea);
 
@@ -607 +619 @@
     var postdata = "";
     var i;
+
+    var content = YAHOO.util.Dom.get('pretextarea').value;
+    
+    // To send an email, the To address and message Body must contain data.
+    // HTML5 input checking (required attribute) would make empty fields red outlined,
+    // but did not prevent Send button submitting form. So some basic sanity checking in JS:
+    // Checking non-empty and to address field must further be a URL: checking it contains @
+    var to_address = YAHOO.util.Dom.get('address').value;
+
+    if(to_address.trim() === "") {
+    alert(gs.text.berry.invalid_to_address_empty);
+    return;
+    } else if(to_address.indexOf('@') === -1) {
+    alert(gs.text.berry.invalid_to_address);
+    return;
+    } else if(content.trim() === "") {
+    alert(gs.text.berry.invalid_msg_body_empty);
+    return;
+    }
+    
     //get checked items
     for (i in mailinfo) {
@@ -614 +646 @@
     }
 
-    var content = YAHOO.util.Dom.get('pretextarea').value;
 
     content = content.replace(/&/g,'-------');