检查所有输入表单Javascript

时间:2018-01-26 08:54:50

标签: javascript foreach

我想检查我的所有输入是否都不为空。 但我的javascript代码并没有检查所有,只是第一个

function verif() {

    var noError = true;

    var infos = [
         //{f:name_field,l:length_min,e:error_nb,b:!isNan}
         {f:'nom',l:2,e:"1",b:false},
         {f:'nom_nais',l:2,e:"2",b:false},
         {f:'prenom',l:2,e:"3",b:false},
         {f:'nais',l:2,e:"4",b:true},
         {f:'nais1',l:2,e:"4",b:true},
         {f:'nais2',l:2,e:"4",b:true},
         {f:'nais3',l:4,e:"4",b:true},
         {f:"pays",l:2,e:"6",b:false},
         {f:"tel",l:2,e:"7",b:true},
         {f:"tel_vac",l:2,e:"9",b:true},
         {f:"tel_pers",l:2,e:"11",b:true},
         {f:"previent",l:2,e:"10",b:false},
         {f:"adre1",l:2,e:"5",b:false},
         {f:"adre2",l:2,e:"55",b:false},
         {f:"cp",l:2,e:"13",b:false},
         {f:"ville",l:2,e:"14",b:false},
         {f:"adre1_vac",l:2,e:"8",b:false},
         {f:"adre2_vac",l:2,e:"88",b:false},
         {f:"cp_vac",l:2,e:"23",b:false},
         {f:"ville_vac",l:2,e:"24",b:false}
    ];

    infos.forEach(
        function(item){
            if(item.b){
                if (document.getElementById(item.f).value.length<l || !isNaN(document.getElementById(item.f).value))  {

                    document.getElementById("error"+item.e).innerHTML="X !";
                    document.getElementById("error"+item.e).style.color="red";
                    document.getElementById(item.f).style.backgroundColor="#f4a378";
                    document.getElementById(item.f).style.border="2px solid red";
                    noError = false ;

                }else{
                    document.getElementById("error"+item.e).innerHTML="OK !";
                    document.getElementById("error"+item.e).style.color="green";
                }
             } else {

                 if (document.getElementById(item.f).value.length<l)  {

                    document.getElementById("error"+item.e).innerHTML="X !";
                    document.getElementById("error"+item.e).style.color="red";
                    document.getElementById(item.f).style.backgroundColor="#f4a378";
                    document.getElementById(item.f).style.border="2px solid red";
                    noError = false ;

                }else{
                    document.getElementById("error"+item.e).innerHTML="OK !";
                    document.getElementById("error"+item.e).style.color="green";
                }               
            } 
        }
    ) ;

    return noError;

}

我尝试用(document.write / console.log)等方法检查我的所有输入。 Personnaly,我认为我的错误是在“if”条件下,但我不知道为什么这个条件不起作用....

我的一个输入:

&lt; input type =“text”size =“60”id =“nom”name =“nom”class =“keyboardInput”lang =“fr”/&gt;

1 个答案:

答案 0 :(得分:0)

尝试使用对您尝试修改的DOM元素的引用并实现错误检查:

    function verif() {
        var noError = true
           ,infos = [
         //{f:name_field,l:length_min,e:error_nb,b:!isNan}
         {f:'nom',l:2,e:"1",b:false},
         {f:'nom_nais',l:2,e:"2",b:false},
         {f:'prenom',l:2,e:"3",b:false},
         {f:'nais',l:2,e:"4",b:true},
         {f:'nais1',l:2,e:"4",b:true},
         {f:'nais2',l:2,e:"4",b:true},
         {f:'nais3',l:4,e:"4",b:true},
         {f:"pays",l:2,e:"6",b:false},
         {f:"tel",l:2,e:"7",b:true},
         {f:"tel_vac",l:2,e:"9",b:true},
         {f:"tel_pers",l:2,e:"11",b:true},
         {f:"previent",l:2,e:"10",b:false},
         {f:"adre1",l:2,e:"5",b:false},
         {f:"adre2",l:2,e:"55",b:false},
         {f:"cp",l:2,e:"13",b:false},
         {f:"ville",l:2,e:"14",b:false},
         {f:"adre1_vac",l:2,e:"8",b:false},
         {f:"adre2_vac",l:2,e:"88",b:false},
         {f:"cp_vac",l:2,e:"23",b:false},
         {f:"ville_vac",l:2,e:"24",b:false}];

        infos.forEach(function(item){
            try{
        //If an error is found on an iteration, stop checking the rest
                if ( !(noError == false 
                    && typeof item.f == "string"
                    && typeof item.e == "string") ) {
        //Shouldn't get here, but check f & e are valid anyway
                    return;
                }
                var f = document.getElementById(item.f);

                if ( !(f != null && typeof f == "object") ) {
        //Item isn't found in DOM, abort!
                    return;
                }
                var e = document.getElementById("error" + item.e);

                if ( !(e != null && typeof e == "object") ) {
        //Item isn't found in DOM, abort!
                    return;
                }
                if(item.b){       
        //What is 'l', not defined in this scope, should this be item.l ?             
                    if ( f.value.length<l || !isNaN(f.value) )  {
                        e.innerHTML = "X !";
                        e.style.color = "red";
                        f.style.backgroundColor = "#f4a378";
                        f.style.border = "2px solid red";                           
                        noError = false;
                    } else {
                        e.innerHTML = "OK !";
                        e.style.color = "green";
                    }
                } else {
                    if ( f.value.length < l )  {
                        e.innerHTML = "X !";
                        e.style.color = "red";
                        f.style.backgroundColor = "#f4a378";
                        f.style.border = "2px solid red";
                        noError = false;
                    } else {
                        e.innerHTML="OK !";
                        e.style.color="green";
                    }               
                } 
            } catch( ex ) {
               alert("Error in loop iterator: " + ex);
            }               
        });
        return noError;
    }

此外,您还可以将try / catch处理程序放入每个循环迭代调用的函数中。

此外,这可能是你的问题所在,'l'定义在哪里?它在函数中被引用,但我没有在任何地方看到它。