Topic: How to validate single form elements with checkValidity() using MDBootstrap Pro forms?

Brainformance free asked 4 years ago

For our customer we need to use forms with pagination (every forms have multiple pages which are shown/hidden by simple JavaScript). This is all implemented and works. However before a customer goes to the next page we have to validate the form elements in the current page. We validate all forms within a webpage using the following event listener:

(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');
        // Loop over them and prevent submission
        var validation =, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                } else {
            }, false);
    }, false); })();

In case everything works we send the form to the server using Ajax. Now the problem is that the customer insists in a solution where the elements are validated on a per page basis (such that a user can not continue until all elements in the current page are successfully validated.

Therefore we can not continue with the form.checkValidity() function which is described in the documentation, we need a possibility to trigger the validation of single elements within the form manually. Which JavaScript / jQuery function do I need in order to validate the following MDBootstrap inputs manually (one by one)? I tried checkValidity() on single inputs / selects but this gives an error.

Sample element 1:

<div class="cform-element-text">
    <input type="text" id="mzpradukhygujarerofj_form_element_20" name="form_element_20" class="form-control" required="required">
    <label for="form_element_20">Vorname *</label>
    <div class="valid-feedback">
    <div class="invalid-feedback">

Sample element 2:

 <div class="cform-element-select">
        <select id="fabgixrsrkeqvqmrlemw_form_element_29" name="form_element_29" class="mdb-select">
            <option value="" disabled selected>Was wünschen Sie?</option>
            <option value="present">Ein Geschenk</option>
            <option value="view">Schöne Aussicht</option>
        <div class="valid-feedback">

        <div class="invalid-feedback">
            This value is not valid

Mateusz Łubianka staff answered 4 years ago


If you visit our docs page: you can see:

All about validation you can find in MDB docs. We will develop and introduce new functionalities. Thank you very much for your opinion.


Brainformance free commented 4 years ago

Ok thanks I will review this. Maybe I can fix easily at least for checkbox and radio. Switcher and File Input are still missing?

Mateusz Łubianka staff commented 4 years ago

Example with file input you can see here: There is not for Switcher.


Brainformance free answered 4 years ago

Finally I have found some custom solution to check if single elements are valid. Part of my code is:

let currentPageInputs = $(currentPage).find(':input');
$(currentPageInputs).each(function (inputIndex, inputActual) {
    if ($(this).attr('data-validate') !== 'undefined') {
        if ($(this).is(':invalid')) {
            allowSwitch = false;
            if ($(this).is('select')) {

$(document).on('change', '.cform select[data-validate]', function () {

So I loop through the elements and check for the invalid selector.

By the way your valid/invalid feedback mechanism is not working for the following elements:

  • Select
  • File Input
  • Required Checkbox
  • Switchers
  • Required Radio Buttons

Beside of the Radio Buttons (which turn red) those elements do not show any feedback at all in case they are invalid. You really should improve this for better forms.

Mateusz Łubianka staff answered 4 years ago

Hi @Brainformance,

You can try this:

$('form').validate({ // initialize plugin on your form
    // your options
$('#Element').valid(); //  validate a single element

Also you can check an article about validation:


Brainformance free commented 4 years ago

Hi there! I have tried The fields are validated but it breaks the style of the MDB Pro components. The label is not moving. Can you post an example on how to validate single elements in a non UI-breaking way?

Tried a lot of things but nothing works. Please provide a working example!

Mateusz Łubianka staff commented 4 years ago

can you create a snippet showing how did you try to do it now? I'll try to help you.


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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: Yes
  • Provided link: No