【发布时间】：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（好吧，它的答案）可能会对你有所帮助。
标签： javascript jquery formvalidation-plugin