Show
Ignore:
Timestamp:
28.05.2019 19:56:46 (7 months 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.

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/berrybasket/berrycheckout.js

    r33109 r33114  
    381381        input.setAttribute("id", item); 
    382382        input.setAttribute("class", "mailinput"); 
    383         input.setAttribute("type", "text"); 
     383        if(item === "address") { 
     384            input.setAttribute("type", "email"); // https://html5-tutorial.net/form-validation/validating-email/ 
     385            input.required = true; // https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript 
     386        } else { 
     387            input.setAttribute("type", "text"); 
     388        } 
    384389        td.appendChild(input); 
    385390        tr.appendChild(td); 
     
    437442        input.setAttribute("id", item); 
    438443        input.setAttribute("class", "mailinput"); 
    439         input.setAttribute("type", "text"); 
     444        if(item === "address") { 
     445            input.setAttribute("type", "email"); // https://html5-tutorial.net/form-validation/validating-email/ 
     446            input.required = true; // https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript 
     447        } else { 
     448            input.setAttribute("type", "text"); 
     449        } 
    440450        td.appendChild(input); 
    441451        tr.appendChild(td); 
     
    506516    var parea = document.createElement('textarea'); 
    507517    parea.id = 'pretextarea'; 
    508  
     518    parea.required = true; // https://www.w3schools.com/tags/att_textarea_required.asp 
     519            // and https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript 
     520     
    509521    parent.appendChild(parea); 
    510522 
     
    607619    var postdata = ""; 
    608620    var i; 
     621 
     622    var content = YAHOO.util.Dom.get('pretextarea').value; 
     623     
     624    // To send an email, the To address and message Body must contain data. 
     625    // HTML5 input checking (required attribute) would make empty fields red outlined, 
     626    // but did not prevent Send button submitting form. So some basic sanity checking in JS: 
     627    // Checking non-empty and to address field must further be a URL: checking it contains @ 
     628    var to_address = YAHOO.util.Dom.get('address').value; 
     629 
     630    if(to_address.trim() === "") { 
     631    alert(gs.text.berry.invalid_to_address_empty); 
     632    return; 
     633    } else if(to_address.indexOf('@') === -1) { 
     634    alert(gs.text.berry.invalid_to_address); 
     635    return; 
     636    } else if(content.trim() === "") { 
     637    alert(gs.text.berry.invalid_msg_body_empty); 
     638    return; 
     639    } 
     640     
    609641    //get checked items 
    610642    for (i in mailinfo) { 
     
    614646    } 
    615647 
    616     var content = YAHOO.util.Dom.get('pretextarea').value; 
    617648 
    618649    content = content.replace(/&/g,'-------');