Question

I need to array through all the input elements within a form to check if they are left empty (validation is also on the server). Mootools is being used a library for the site so here is my code:

$$('#emeraldForm input').addEvent("submit",function(){
    //form validation

});

I would like to do that before the form gets submitted. The empty ones will than be given an error classes which will be removed on ‘keyup’ event.

See full code here

Answer 1

If you don’t want to use HTML5 required attribute or Mootool’s More validation providers (inline validation) than you can do something simple like assigning all required input[type=text] elements and input[type=checkbox] elements

class="required" 

and then do something like this:

$('emeraldForm').addEvent("submit",function(evt){
    var preventSubmission = false;
    $(this).getElements("input[type=text].required").each(function(elem) {
        if (elem.get("value").trim() == "") { 
            elem.addClass("error");                
            preventSubmission = true; 
        }
    });
    $(this).getElements("input[type=checkbox].required").each(function(elem) {
        if (!elem.get("checked")) { 
            elem.addClass("error");                
            preventSubmission = true; 
        }
    });
    if (preventSubmission) {
        evt.preventDefault();
    }
});

I am adding class error which can be in CSS specified as red background or some icon next to input element or similar attention drawing thing.