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>

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



Please insert min. 20 characters.

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