Question

我想在用户提交表单时使用javascript验证表单，这是我的代码，

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;
    }
    
});

这里event.preventDefault（）语句没有执行，请帮我谢谢。

Answer 1

问题似乎是在回调函数中使用参数event引起的，请尝试使用evt，这里演示：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

尝试使用括号表示法：

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

同时检查该事件是否为对象。

使用javascript提交表单验证

2 个答案: