Form Validation on submit using javascript

Question

I want to validate a form using javascript when the user submits the form, this is my code,

 document.getElementById("form").addEventListener("submit", function(event){ var elements = document.getElementById("form").elements; var error = 0; for(var i = 0; i < elements.length; i++) { //code if(elements[i].type == "checkbox" || elements[i].type == "radio") { var check_box = document.getElementById(elements[i].id).checked; if (check_box == false) { //code error++; var checkbox_div = elements[i].parentNode.parentNode.id; produce_warning("you must agree to proceed", checkbox_div, elements[i].id); } } else { if (elements[i].value == "" || elements[i].value == null) { //code error++; produce_warning("you can not leave this field empty", elements[i].parentNode.id, elements[i].id); } } } if (error > 0) { //code event.preventDefault(); } else{ return true; } }); 

Here the event.preventDefault() statement is not executing, please help me thank you.

Answer 1

The problem seems to be caused by using the argument event in the callback function, try with evt , demo here: https://jsfiddle.net/5c4gw4st/1/

document.getElementById("form").addEventListener("submit", function(evt){
    var elements = document.getElementById("form").elements;
    var error = 0;
    for(var i = 0; i < elements.length; i++)
    {
            //code
            if(elements[i].type == "checkbox" || elements[i].type == "radio") {
                var check_box = document.getElementById(elements[i].id).checked;
                  if (check_box == false) {
                      //code
                      error++;
                      var checkbox_div = elements[i].parentNode.parentNode.id;
                      produce_warning("you must agree to proceed", checkbox_div, elements[i].id);
                  }
            }

            else {
                if (elements[i].value == "" || elements[i].value == null) {
                    //code
                    error++;
                    produce_warning("you can not leave this field empty", elements[i].parentNode.id, elements[i].id);
                }

            }
    }

    if (error > 0) {
        //code
        evt.preventDefault();
    }
    else{
        return true;
    }

});

Answer 2

Try to use bracket notation:

if (error > 0) {
     //code
     event[preventDefault()];
}

Also check that event is an object.