Topic: Custom Validation Message not shown
brian03 priority asked 9 months ago
Expected behavior Created custom validation messages in JS but standard invalid messages from HTML are shown.
Actual behavior
Resources (screenshots, code snippets etc.)
var ownerPassword = document.getElementById("stepperFormOwnerPassword");
var confirmOwnerPassword = document.getElementById("stepperFormConfirmOwnerPassword");
if (ownerPassword.value !== confirmOwnerPassword.value) {
ownerPassword.setCustomValidity('Passwords do not match');
confirmOwnerPassword.setCustomValidity('Passwords do not match');
e.preventDefault();
} else {
ownerPassword.setCustomValidity('');
confirmOwnerPassword.setCustomValidity('');
}
<div class="col">
<div class="form-outline" data-mdb-input-init>
<input type="text" id="stepperFormOwnerPassword" class="form-control" required/>
<label class="form-label" for="stepperFormOwnerPassword">Password</label>
<div class="invalid-feedback">Invalid password</div>
</div>
</div>
<div class="col">
<div class="form-outline" data-mdb-input-init>
<input type="text" id="stepperFormConfirmOwnerPassword" class="form-control" required/>
<label class="form-label" for="stepperFormConfirmOwnerPassword">Confirm Password</label>
<div class="invalid-feedback">Invalid password</div>
</div>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 9 months ago
We have a Validation component which makes form validating nice and easy:
https://mdbootstrap.com/docs/standard/forms/validation/#section-basic-example