I have a form for allowing the user to change their account password, like so:
<div class="signup-form-small">
<form method="post" name="frmPassword" id="frmPassword" class="needs-validation" novalidate>
<div class="form-group">
<div class="col form-floating">
<input type="password" class="form-control" id="curpwd" name="curpwd" required>
<label class="form-label" for="curpwd">Your Current Password</label>
</div>
</div>
<div class="form-group">
<div class="col form-floating">
<input type="password" class="form-control" id="newpwd" name="newpwd" required>
<label class="form-label" for="newpwd">Enter New Password</label>
</div>
</div>
<div class="row form-group">
<div class="col form-floating">
<input type="password" class="form-control" id="cnfpwd" name="cnfpwd" required>
<label class="form-label" for="cnfpwd">Confirm New Password</label>
</div>
</div>
<div class="form-group">
<button type="submit" id="btnPwdSubmit" name="btnPwdSubmit" class="btn btn-primary btn-lg btn-block w-100 has-spinner">
<div class="spinner-border float-right hidden" id="pwdspinner" role="status"></div>
Change My Password
</button>
</div>
</form>
</div>
In my script I have the following code block which should universally handle validation:
$(document).ready(function () {
'use strict';
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
});
and finally, here is the script code that fires when the user clicks the 'Chnage My Password' button in the form:
$('#frmPassword').submit(function (event) {
event.preventDefault();
setPwdDisabled();
var obj = Object.fromEntries(new FormData(event.target));
if (obj.Is_Body_HTML == 1) {
obj.Is_Body_HTML = true;
}
else {
obj.Is_Body_HTML = false;
}
if (obj.Is_Active == 1) {
obj.Is_Active = true;
}
else {
obj.Is_Active = false;
}
if ($('#curpwd').val() != $('#cnfpwd').val()) {
$('toastPwd').toast('show)');
return;
}
var json = JSON.stringify(obj);
var request = $.ajax({
url: "../handlers/changepwd.ashx",
method: "POST",
data: json,
dataType: "json"
});
request.done(function (msg) {
if (msg.Success == false) {
$('#spnPwdErr').html(msg.Status);
$('#toastPwdFail').toast('show');
}
else
$('#toastPwdSuccess').toast('show');
});
request.fail(function (jqXHR, textStatus) {
$('#spnPwdErr').html('Unable to complete your request at this time.');
$('#toastPwdFail').toast('show');
});
request.always(function (jqXHROrData, textStatus, jqXHROrErrorThrown) {
setPwdEnabled();
});
});
For whatever reason, the form validation never fires, and I don't know why. I added alerts into the validation code and they never pop up. The form submission happens no matter what. I don't get any errors or other messages in the console. Can anyone shed any light on why this is not functioning?
Remove the add event listener - having it inside the jquery ready makes it redundant -
$(document).ready(function () {
'use strict';
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
});