bad-form-peter/root/main.js

/*

vaeringjar copyright 2017
Licenced as CC0

BadFormPeter has basis on three basic ideas:

* tag:      onload this can tag the form with whatever asterisks for required fields
* check:    determines which required fields have a valid input
            and paints around the missing required labels
            and  lists errors
* submit:   the success/valid case for check

                    __                                                   
                    ",'.                                                 
                      ",\                                                
                      / Y        BAD FORM PETER, BAD FORM!               
     ,             _,'--.\                                               
     \_-(         ;--(/\ )                                               
       \'.         )6,6 /)                                               
        \ \_       \ _, |_                                               
         ', '--/'---'- /_/'-._                                           
           '-'-L._  -|/      /-._     /                                  
                  |      |-~'--._'-._/(,                                 
                 ,_/>   /         ''--~                                  
                 /\<_ _/                                                 
                // "-'-'\                                                
               ,~-.   ._ )                                               
               /   \_/  '\                                               
              /   /   \   |                                              
             /  /`    _\  |                                              
            ( ,/  _.-' __.'                                              
           / /  [((---'                                                  
          / /   ) )                                                      
         / /    \/                                                       
        K=/                                                              
snd    / _>                                                              
      )_/                                                                
*/


var BadFormPeter = function () {
    //this.foo = bar;
};

BadFormPeter.prototype = (function () {
    
    function _paintForm(id, cssName) {
        console.log("unimplemented");
    }
    function _checkform(formId) {
        
        var form = document.getElementById(formId);
        
        var missing = new Array();

        for(var current = 0; current < form.elements.length ; ++current) {
        
            var element = form.elements[current];
        
            if (element.hasAttribute("required")) {
            
                var cssName = "foo";
                var id = element.getAttribute("id");
                var name = element.getAttribute("name");
                var elementType = element.nodeName.toLowerCase();
                var prompt = "Required field " + current + ": " + elementType + " " + name;
                
                
                //TODO: Paint all the missing required elements' labels.
                if (elementType === "select") {
                    //fail when option value empty
                    console.log(prompt);
                } else if (elementType === "textarea") {
                    //fail when empty
                    console.log(prompt);
                } else if (elementType === "input") {
                    var inputType = element.getAttribute("type");
                    console.log(prompt + " with type " + inputType);

                    if (inputType === "email") {
                        //fail when invalid
                    }else if (inputType === "date") {
                        //fail when invalid
                    } else if (inputType === "radio" || inputType === "checkbox") {
                        //fail when none checked
                    } else { 
                        // if (inputType === "text") {
                        //fail when empty
                        if (element.value === ""){
                            missing.push(prompt);
                        }
                        
                    }

                }
                
            }
        }
        return missing;
    }
    function findLableForControl(el) {
       var idVal = el.id;
       labels = document.getElementsByTagName('label');
       for( var i = 0; i < labels.length; i++ ) {
          if (labels[i].htmlFor == idVal)
               return labels[i];
       }
    }
    
    return {
        onload: function (formId, buttonId, promptsId) {
        
            //TODO: Tag all the required elements' labels.
        
            var button = document.getElementById(buttonId);
            
            var label = findLableForControl(button);
            label.style.display = "none";
            
            button.addEventListener("click", function(event) {
                event.preventDefault();
                var missing = _checkform(formId);
                var prompts = document.getElementById(promptsId);
                prompts.parentElement.style.display = "none";
                prompts.innerHTML = "";
                if (missing !== undefined && missing.length > 0) {
                    var errors = "<li>" + missing.join("</li><li>") + "</li>";
                    prompts.parentElement.style.display = "block";
                    prompts.innerHTML = errors;
                    return false;
                } else {
                    alert("blocked success");
                    return false;
                }
            });
        }
    };

})();