Topic: Custom Validation Message not shown

brian03 priority asked 5 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');
} else {

<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 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>

Mateusz Lazaru staff commented 5 months ago

We have a Validation component which makes form validating nice and easy:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



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