I know there are few instances of this error being asked about, but none of the tips given seem to do anything for me. Any thoughts or tips would be appreciated.
I have a form that has fields validated via formvalidation.io, latest version 1.8.1
I thought my problem might have something to do with the "Confirm Password" and Password Strength steps but removing those fields has the same error appear.
Keep getting this error, although the form functions just fine and info gets written to the db correctly etc.:
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>)
My Form:
<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>
Problem Solved.
Had to redo my html a little. More of an issue with the way I had hideif/showif statements in place.