我只是想验证这个表单，但我不断收到 Uncaught TypeError: Cannot read properties of null (reading 'style')
[英]i just want to validate this form but i keep getting Uncaught TypeError: Cannot read properties of null (reading 'style')
问题描述
I tried everything, from moving the script tag above and below the form, using refer, putting the js in the html file...etc.
我尝试了一切，从在表单上方和下方移动脚本标记，使用引用，将 js 放入 html 文件中......等等。 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.请帮助 :(。通常我在使用 DOM 方法时没有任何问题，但无论我做什么，它都会一直说元素为空。就像它试图找到一些东西但它不能。
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>
1 个解决方案
解决方案1
1 2022-07-21 12:30:04
I saw your code and I think you have 2 issues.我看到了你的代码，我认为你有 2 个问题。
1- There are 2 variables that are not defined 1- 有 2 个变量未定义
tableauIds = tableauStr[j].split(";;");
inputId = tableauIds[0];
so to solve it you must add let (I prefer to stay away from var keyword)所以要解决它，你必须添加 let （我更喜欢远离 var 关键字）
let tableauIds = tableauStr[j].split(";;");
let inputId = tableauIds[0];
2- There is a problem in this line of code in your HTML file 2-您的HTML文件中的这行代码有问题
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'). (employeur_new) 和 (group_new) 不作为输入的 id 存在，因此它会给出错误（无法读取 null 读取“样式”的属性）。
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) a- 进行新的输入，一个具有 (employeur_new) 的 id，另一个具有 (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. b- 从您的代码中删除 (employeur_new) 和 (group_new)。
I hope that is what you are looking for.我希望这就是你要找的。 thanks谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我不断收到此错误？ 未捕获的类型错误：无法读取 null 的属性（读取“术语”） - why do i keep getting this error? Uncaught TypeError: Cannot read properties of null (reading 'term')
代码运行正常，但为什么我在控制台出现错误，Uncaught TypeError: Cannot read properties of null (reading 'style')? - Code is working and runs fine, but why I'm getting error at console , Uncaught TypeError: Cannot read properties of null (reading 'style')?
我不断收到Uncaught ReferenceError：未定义dropMenu和Uncaught TypeError：无法读取null的属性'style' - i keep getting Uncaught ReferenceError: dropMenu is not defined and Uncaught TypeError: Cannot read property 'style' of null
"未捕获的类型错误：无法读取 null 的属性（读取“样式”）" - Uncaught TypeError: Cannot read properties of null (reading 'style')
我收到这个“TypeError：无法读取 null 的属性（读取'长度'）” - I'm getting this "TypeError: Cannot read properties of null (reading 'length')"
未捕获的类型错误：无法读取 null 的属性（正在读取“addEventListener”）我该如何解决？ - Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') how can I fix it?
我在基本 JS 按钮中收到“Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')”错误 - I get the "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" error in a basic JS button
未捕获的类型错误：无法读取 null 的属性（正在读取“切片”）------ 未捕获的类型错误：无法读取未定义的属性（正在读取“过滤器”） - Uncaught TypeError: Cannot read properties of null (reading 'slice') ------ Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
为什么我不断收到此错误？ 未捕获的类型错误：无法读取 null 的属性“classList” - Why do I keep getting this error? Uncaught TypeError: Cannot read property 'classList' of null
我仅在Chrome中不断收到以下错误：未捕获的TypeError：无法读取null的属性“值” - I keep getting the following error in Chrome only: Uncaught TypeError: Cannot read property 'value' of null
相关标签