问题描述
我知道很少有人询问此错误的实例，但给出的提示似乎对我没有任何帮助。任何想法或提示将不胜感激。
我有一个通过 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,}
}
},};
};
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>
解决方法
问题已解决。
不得不稍微重做我的 html。 更多的问题是我使用 hideif/showif 语句的方式。