Custom Validation in MDB input


Topic: Custom Validation in MDB input

BizRTC priority asked 3 years ago

Hi, I have MDB Pro Super Bundle. I am working with forms and validation. I wanted to know if I can put custom validation in MDB ?

Here is my code :

(function () {
  'use strict';
  window.addEventListener('load', function () {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation-password');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        $('#password, #confirm_password').on('keyup', function () {
          if ($('#password').val() != $('#confirm_password').val()) {

            console.log("Values changed");
            form.checkValidity() = false;
            event.preventDefault();
            event.stopPropagation();

          }    
        });

        form.classList.add('was-validated');

      }, false);
    });
  }, false);
})();

Note I have tried to add custom check to match password with custom password. I want to show MDB error message if password and confirm password do not match. Like done here :

MDB Bootstrap Form Validation


Piotr Glejzer staff commented 3 years ago

Hi,
So what do you exactly need?


BizRTC priority commented 3 years ago

As mentioned above, I want to show MDB error messgae like it shows when HTML validation fails. I want to trigger this error message on certain condition using javascript.


Piotr Glejzer staff commented 3 years ago

did you check this? https://mdbootstrap.com/docs/jquery/forms/validation/#select we don't have other examples with validations to show


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
  • User: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.7.5
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags