为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList'
Posted
技术标签:
【中文标题】为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 \'classList\'【英文标题】：Why do I get this error: Uncaught TypeError: Cannot read property 'classList' of null为什么我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList' 【发布时间】：2021-10-06 20:52:34 【问题描述】：我知道很少有人会询问此错误，但给出的提示似乎对我没有任何帮助。任何想法或提示将不胜感激。
我有一个表单，其中包含通过 formvalidation.io 验证的字段，最新版本 1.8.1
我认为我的问题可能与“确认密码”和密码强度步骤有关，但删除这些字段会出现相同的错误。
不断收到此错误，尽管表单功能正常并且信息已正确写入数据库等：
FormValidation.min.js:formatted:2560 Uncaught TypeError: Cannot read property 'classList' of null
at FormValidation.min.js:formatted:2560
at Array.forEach (<anonymous>)
at s$4 (FormValidation.min.js:formatted:2559)
at FormValidation.min.js:formatted:2588
at Array.forEach (<anonymous>)
at c (FormValidation.min.js:formatted:2587)
at s.install (FormValidation.min.js:formatted:2845)
at l.registerPlugin (FormValidation.min.js:formatted:1407)
at FormValidation.min.js:formatted:1965
at Array.forEach (<anonymous>)
我的表格：
<form id="signupForm" method="post" action="signup.html">
<div class="form-group">
<label><b>Work Name</b></label>
<input type="text" class="form-control" id="working_name" name="working_name" placeholder="Your Working Name">
</div>
<div class="form-group">
<label><b>Work Email</b></label>
<input type="text" class="form-control" id="email" name="email" placeholder="Your Work Email">
</div>
<div class="form-group">
<label><b>Choose a Password</b></label>
<input type="text" class="form-control" id="pwd" name="pwd" placeholder="Choose a Password">
<div class="progress mt-2" id="progressBar" style="opacity: 0; height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animate" style="width: 100%; height: 5vh;"></div>
</div>
</div>
<div class="form-group">
<label><b>Retype Password</b></label>
<input type="text" class="form-control" id="confirmPWD" name="confirmPwd" placeholder="Enter your Password Again">
</div>
<div class="form-group">
<label><b>Website</b></label>
<input type="text" class="form-control" id="website_url" name="website_url" placeholder="Your Website (if you have one)">
</div>
<div class="form-group">
<label><b>Twitter Page</b></label>
<input type="text" class="form-control" id="twitter_url" name="twitter_url" placeholder="Twitter Page">
</div>
<div class="form-group">
<label><b>Link to Current Advertising</b></label>
<input type="text" class="form-control" id="advertising_link" name="advertising_link" placeholder="Link to Current Advertising">
</div>
<div class="form-group">
<label><b>Referred By</b></label>
<input type="text" class="form-control" id="referred_by" name="referred_by" placeholder="Who referred you to RS?">
</div>
<div class="form-group">
<label><b>Other Information</b></label>
<textarea id="other_info" name="other_info" cols="40" rows="3" class="form-control" placeholder="Other Information"></textarea>
</div>
<div class="form-group" align="center">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<br><button class="btn btn-signup" name="action" value="Sign up to use RS Services" type="submit">Sign up to use RS Services</button>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function(e)
const strongPassword = function()
return
validate: function(input)
// input.value is the field value
// input.options are the validator options
const value = input.value;
if (value === '')
return
valid: true,
;
const result = zxcvbn(value);
const score = result.score;
const message = result.feedback.warning || 'The password is weak';
const cmessage = 'Success Full';
// By default, the password is treat as invalid if the score is smaller than 3
// We allow user to change this number via options.minimalScore
const minimalScore = input.options && input.options.minimalScore ?
input.options.minimalScore :
5;
console.log(minimalScore, "dfd");
if (score >= minimalScore)
console.log("condition true")
return
valid: true,
message: cmessage,
meta:
// This meta data will be used later
score: score,
,
else if (score < minimalScore)
console.log("condition false")
return
valid: false,
// Yeah, this will be set as error message
message: message,
meta:
// This meta data will be used later
score: score,
,
,
;
;
const form = document.getElementById('signupForm');
const fv = FormValidation.formValidation(
form,
fields:
working_name:
validators:
notEmpty:
message: 'Your Agency or Working Name is required'
,
stringLength:
min: 3,
max: 30,
message: 'The name must be more than 3 and less than 30 characters long'
,
// regexp:
// regexp: /^[a-zA-Z0-9_]+$/,
// message: 'The name can only consist of letters, numbers or an underscore'
//
,
email:
validators:
notEmpty:
message: 'Your Email Address is required'
,
emailAddress:
message: 'That is not a valid email address'
,
pwd:
validators:
notEmpty:
message: 'The password is required and cannot be empty'
,
checkPassword:
message: 'The password is too weak',
minimalScore: 4,
,
,
confirmPwd:
validators:
identical:
compare: function()
return form.querySelector('[name="pwd"]').value;
,
message: 'The Passwords do not match'
,
,
plugins:
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon(
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
),
,
)
.registerValidator('checkPassword', strongPassword)
.on('core.validator.validating', function(e)
if (e.field === 'pwd' && e.validator === 'checkPassword')
document.getElementById('progressBar').style.opacity = '1';
)
.on('core.validator.validated', function(e)
if (e.field === 'pwd' && e.validator === 'checkPassword')
const progressBar = document.getElementById('progressBar');
if (e.result.meta)
// Get the score which is a number between 0 and 4
const score = e.result.meta.score;
console.log(score);
// Update the width of progress bar
const width = (score == 0) ? '1%' : score * 25 + '%';
console.log(width, "width");
progressBar.style.opacity = 1;
progressBar.style.width = width;
else
progressBar.style.opacity = 0;
progressBar.style.width = '0%';
);
);
</script>
【问题讨论】：
实际发生错误的代码在哪里？这都是库代码的一部分吗？ 不知道如何回答。在我提交表单后，我在开头显示的错误就是我的控制台中出现的错误。我想我可以开始删除表单验证区域中的一些密码强度确认部分，看看它在什么时候消失......我知道如果我在页面末尾删除所有表单验证代码我没有错误，这当然是有道理的，因为我想在某个地方有我的问题.. 您想查看错误中的那些行号所引用的 7 个部分吗？ 您的某个插件似乎在初始化期间出错，但不确定原因。快速浏览一下文档，您似乎正确地使用了它们。也许您可以尝试使用 DevTools 在一些基于 Chromium 的浏览器中调试它，看看它是哪个插件（以及它为什么出错）。由于我在堆栈跟踪中看到了:formatted，看来您已经在做类似的事情了？
也许this question（好吧，它的答案）可能会对你有所帮助。
【参考方案1】：
问题解决了。
不得不稍微重做我的 html。 更多的问题在于我使用 hideif/showif 语句的方式。
【讨论】：
以上是关于为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList'的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取未定义的属性“toLowerCase”
Backbone.js 视图是不是需要 jQuery 或 Zepto？ （或者：为啥我会收到“未捕获的类型错误：未定义不是函数”？）