i just want to validate this form but i keep getting Uncaught TypeError: Cannot read properties of null (reading 'style')

user_19593623 0
Viewed 36

I tried everything, from moving the script tag above and below the form, using refer, putting the js in the html file...etc. i just can't understand why this fails to work. plz help :(. normally i don't have any problems when using DOM methods, but no matter what i do it just keeps saying that the element is null. its like its trying to find something but it can't.

if you do fix it, please provide a good explanation so i can avoid similar mistakes in the future, thanks :-)

var traitementTimeOut;
function frm_valider(idFrm,url,idMsgDiv,InputIds){
    if(js_validerFrm(InputIds)==false) return;
    document.getElementById(idFrm).submit();   
    functionAappeler = "frm_valider_traitement('"+url+"','"+idMsgDiv+"')";
    traitementTimeOut=setTimeout(functionAappeler, 1000);  
}

function js_validerFrm(InputIds){
    if(InputIds!=""){
        var retourFunc=true;
        var color_oblig='#A54241';var color_nonValide='#EF9C6A';var color_dtNonValide='yellow';
        var msg_oblig               ="Champs obligatoires\n\r";
        var msg_nonValide           ="Contenu des champs n'est pas valide";
        var msg_dtNonValide         ="Les champs mises en jaunes ne peuvent pas  tre des dates futures\n\r";
        var msg_dtNonValide_passe   ="Les champs mises en jaunes ne peuvent pas  tre des dates pass es\n\r";
        var tableauStr              = InputIds.split('##');
        var err_msg_dt="";var err_msg_olig="";var err_msg_nonValide ="";    
        //------
        for(j=0;j<tableauStr.length;j++){
            tableauIds  = tableauStr[j].split(';;');
            inputId     = tableauIds[0];
            isOblig     = tableauIds[1];
            regExp      = tableauIds[2];
            if(document.getElementById(inputId).style.display==""){
                if(document.getElementById(inputId)){
                    
                    curFldValue = document.getElementById(inputId).value;
                    curFldValue=curFldValue.replace(/^\s+/g,'').replace(/\s+$/g,'');
                    if(isOblig==1){
                        if(curFldValue==""){
                            err_msg_olig=msg_oblig;
                            document.getElementById(inputId).style.backgroundColor=color_oblig;
                            retourFunc = false;
                        }
                        else if(regExp=="dateF"){                           
                            if(checkDateNonFutur(curFldValue)==true)    document.getElementById(inputId).style.backgroundColor='';
                            else{
                                err_msg_dt=msg_dtNonValide;
                                document.getElementById(inputId).style.backgroundColor=color_dtNonValide;
                                retourFunc = false;
                            }
                        }
                        else if(regExp=="dateP"){   
                            if(checkDateNonPasse(curFldValue)==true)    document.getElementById(inputId).style.backgroundColor='';
                            else{
                                err_msg_dt=msg_dtNonValide_passe;
                                document.getElementById(inputId).style.backgroundColor=color_dtNonValide;
                                retourFunc = false;
                            }
                        }
                        else if(!curFldValue.match(regExp)){
                            err_msg_nonValide=msg_nonValide;
                            document.getElementById(inputId).style.backgroundColor=color_nonValide;
                            retourFunc = false;         
                        }
                        else {document.getElementById(inputId).style.backgroundColor='';}
                    }//--if
                    else if(curFldValue!="") {
                       if(regExp=="dateF"){ 
                            if(checkDateNonFutur(curFldValue)==true)    document.getElementById(inputId).style.backgroundColor='';
                            else{
                                err_msg_dt=msg_dtNonValide;
                                document.getElementById(inputId).style.backgroundColor=color_dtNonValide;
                                retourFunc = false;
                            }
                        }
                        else if(regExp=="dateP"){
                            if(checkDateNonPasse(curFldValue)==true)    document.getElementById(inputId).style.backgroundColor='';
                            else{
                                err_msg_dt=msg_dtNonValide_passe;
                                document.getElementById(inputId).style.backgroundColor=color_dtNonValide;
                                retourFunc = false;
                            }
                        }
                        else if(!curFldValue.match(regExp)){
                            err_msg_nonValide=msg_nonValide;
                            document.getElementById(inputId).style.backgroundColor=color_nonValide;
                            retourFunc = false;             
                        }
                        else {document.getElementById(inputId).style.backgroundColor='';}
                    }
                    else {document.getElementById(inputId).style.backgroundColor='';}
                }//if
            }//if
            else document.getElementById(inputId).style.backgroundColor='';
         }
        if(retourFunc==false) {alert(err_msg_dt+err_msg_olig+err_msg_nonValide);return false;}
        return true;
    }//if
    else return true; 
}//function
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="./luck.js"></script>
</head>
<body>
    <p align='center'><table width='100%' align='center'> 
        <form method='POST' action="mngUtilisateur_liste_new_bean.php" name="ex_Utilisateur_new" id="ex_Utilisateur_new" 
         target="ex_Utilisateur_new_iframe" >

    <tr class='tr_1'><td width='30%'><b>Nom:</b></td> 
            <td width='20%'><input id='nom_new' name='nom_new'
            type='text' class='champTxt' size='60'></td></tr> 

    <tr class='tr_1'><td width='30%'><b>Login</b></td> 
            <td width='20%'><input id='login_new' name='login_new' 
            type='text' class='champTxt' size='60'></td></tr>

    <tr class='tr_1'><td width='30%'><b>Mot de passe</b> 
            </td><td width='20%'><input id='pwd_new' name='pwd_new'  
            type='password' class='champTxt' size='60'></td></tr>
    <tr class='tr_1'><td width='30%'><b>confirmez le mot de passe:</b> 
            </td><td width='20%'><input id='confpwd_new' name='confpwd_new'  
            type='password' class='champTxt' size='60'></td></tr>

    <tr class='tr_2'><td colspan='4' align='center'> 
    <input type='button' value='Valider' onClick="if(document.getElementById('pwd_new').value == 
    document.getElementById('confpwd_new').value)
    frm_valider('ex_Utilisateur_new','mngUtilisateur_liste_new_bean.php','liste_newElem_msg','nom_new;;1;;^[a-zA-Z]+##login_new;;1;;^[a-zA-Z0-9]+##pwd_new;;1;;^[a-zA-Z0-9]+##employeur_new;;1;;^[0-9]+##group_new;;1;;^[0-9].*');
      else {
        document.getElementById('pwd_new').style.color='red';
        document.getElementById('pwd_new').value = '';
        document.getElementById('confpwd_new').style.color='red';
        document.getElementById('confpwd_new').value = '';
     } "></td></tr></form></table></p>

</body>
</html>

typeerror dom javascript
1 Answers

I saw your code and I think you have 2 issues.

1- There are 2 variables that are not defined

tableauIds = tableauStr[j].split(";;");
inputId = tableauIds[0];

so to solve it you must add let (I prefer to stay away from var keyword)

let tableauIds = tableauStr[j].split(";;");
let inputId = tableauIds[0];

2- There is a problem in this line of code in your HTML file

frm_valider('ex_Utilisateur_new','mngUtilisateur_liste_new_bean.php','liste_newElem_msg','nom_new;;1;;^[a-zA-Z]+##login_new;;1;;^[a-zA-Z0-9]+##pwd_new;;1;;^[a-zA-Z0-9]+##employeur_new;;1;;^[0-9]+##group_new;;1;;^[0-9].*');

the (employeur_new) and (group_new) don't exist as an id for input so it gives an error (cannot read property of null reading 'style').

So to solve this I think you want to do one of these choices

a- Make new inputs, one with an id of (employeur_new) and the other with (group_new)

 <tr class='tr_1'>
    <td width='30%'>
          <b>[some text here]</b> 
    </td>
    <td width='20%'>
          <input id='employeur_new' name='[some name here]'  
                type='[type]' class='champTxt' size='60'>
    </td>
 </tr>

<tr class='tr_1'>
    <td width='30%'>
          <b>[some text here]</b> 
    </td>
    <td width='20%'>
          <input id='group_new' name='[some name here]'  
                type='[type]' class='champTxt' size='60'>
    </td>
 </tr>

b- Delete the (employeur_new) and (group_new) from your code.

I hope that is what you are looking for. thanks

user_191092980
Related