How to validate single form elements with checkValidity() us


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

Brainformance asked 2 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 = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(form).trigger('mdFormValidationErrors')
                } else {
                    $(form).trigger('mdFormValidationSuccess')
                }
                form.classList.add('was-validated');
            }, 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">
        Hi
    </div>
    <div class="invalid-feedback">
        There
    </div>
</div>

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>
        </select>
        <div class="valid-feedback">

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

Mateusz Łubianka staff answered 2 years ago

Hi @Brainformance,

You can try this: https://jqueryvalidation.org/valid/

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

Also you can check an article about validation: https://mdbootstrap.com/articles/jquery/validate-forms-with-validate-js/

Best,


Brainformance commented 2 years ago

Hi there! I have tried jqueryvalidation.org. 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 2 years ago

can you create a snippet showing how did you try to do it now? https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


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

$(currentPage).addClass('was-validated');
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')) {
                $(this).parent().addClass('is-invalid')
            }
        }
    }
});

$(document).on('change', '.cform select[data-validate]', function () {
    $(this).parent().removeClass('is-invalid');
});

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 2 years ago

Hi,

If you visit our docs page: https://mdbootstrap.com/docs/jquery/forms/validation/ 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.

Best,


Brainformance commented 2 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 2 years ago

Example with file input you can see here: https://mdbootstrap.com/docs/jquery/forms/validation/#supported-elements There is not for Switcher.

Best,


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No