Validation classes done programmatically, why I have invalid


Topic: Validation classes done programmatically, why I have invalid, is-invalid classes, even by entering values?

Juric pro premium asked 8 months ago

Dear support,

at first I want to ask, why the code from your site (the first MDB Pro example): [https://mdbootstrap.com/docs/jquery/forms/validation/][1]

does not work if I copy this code to my local page?

Main question: For some reason, I am doing validation without forms, so if user clicks on the button, all elements are being validated and for any of them, which are empty, I programmatically add classes 'invalid' and 'is-invalid'. At first it is everything fine: we have invalid elements with red borders like as in your example and even with Message, which is in div element (class="invalid-feedback").

But my problem: if I start entering values in them, those red line and error message do not disappear as in your example. I tested this for input and textarea elemets now. Both are not working. Can you help with this please?

Additional question: is it possible to have multiselect also marked as invalid by putting some classes? (invalid and is-invalid classes seem to have no effect)


Piotr Glejzer staff answered 8 months ago

Hi,

I'm confusing because I don't see a problem with that validation. It is working correctly with my example and on my local page. Are you using the newest version of MDB?

Best,
Piotr


Juric pro premium answered 8 months ago

Hi, I use MDB Pro 4.6.1


Juric pro premium answered 8 months ago

Some update about multiselect.

I found, that it was wrong to add classes "invalid" and "is-invalid" to select element.

Instead of it, I have to find INPUT element, wich is generated by MDB and add these classes to it. So now I have a little better result: I can mark multiselect (input elem) as invalid and it is whown with red border, which is fine.

But, the message in the

<div class="invalid-feedback">my message</div>

is not shown automatically, even I have such element in

<div class="select-wrapper mdb-select md-form colorful-select dropdown-primary">

Can you make an advice, how to activate it with minimum programming?thanks


Piotr Glejzer staff commented 8 months ago

Do you have some more code about that improve?


Juric pro premium answered 8 months ago

Hi, thanks for taking attention to my topic. But I don't understand your question.

Is my question understandable? Here is again my problems with validation:

First:
For Input or Textarea elements it is working almost fine: after I programmatically add classes "invalid" and "is-invalid" to those elements, I can see the red line and the text, which is inside div with class="invalid-feedback"

the problem with these elements: if I begin entering values, the border and the message are not being disappeared, like in your example.

Second: Problem with multiselect validation: after I programmatically add those classes, I see a red line but don't see a message in the div with class "invalid-feedback".

My generated element is:

<div class="select-wrapper mdb-select md-form colorful-select dropdown-primary">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown invalid is-invalid" readonly="true" data-activates="select-options-437fd789-85eb-4a92-86f8-605ec8c43615" value="">

    <ul id="select-options-437fd789-85eb-4a92-86f8-605ec8c43615" class="dropdown-content select-dropdown w-100 multiple-select-dropdown">
        <span class="search-wrap ml-2">
        <div class="md-form mt-0">
            <input type="text" class="search form-control w-100 d-block" placeholder="Search here..">
        </div>
        </span>
        <li class="disabled "><span class="filtrable"><input type="checkbox" class="form-check-input" disabled=""><label></label>  </span></li>
        <li class="select-toggle-all"><span><input type="checkbox" class="form-check-input"><label>Select all</label></span></li>
        <li class=" "><span class="filtrable"><input type="checkbox" class="form-check-input"><label></label>  Bestand Typ</span></li>

        <button class="btn-save btn btn-primary btn-sm">Save</button>
    </ul>
    <select id="idMerkmale" class="mdb-select md-form colorful-select dropdown-primary initialized" multiple="" searchable="Search here.." mandatory="true">
        <option value="" selected="" disabled=""></option>
        <option value="BESTAND_TYP_ENUM_DEUTSCH_TXT">Bestand Typ</option>
    </select>
</div>

Thanks


Piotr Glejzer staff commented 7 months ago

I'm so sorry to say that but I tried to do something with that problem but it will be more work with multi-select validation. I put that topic to our list 'to do'.


Juric pro premium answered 7 months ago

So, if I understand right, at the moment I can not do anything to resolve the problem with multiselect validation?

What about textarea and input? Why the invalid red line is not disappeared on entering values?


Piotr Glejzer staff commented 7 months ago

Textarea is not our example but I see now that material select is in our example and is not validating good. I don't know why someone put this without check it.

I'm gonna try to fix that problem about inputs as soon as possible I will let you know.


Piotr Glejzer staff commented 7 months ago

Did you use JavaScript code to validate inputs in 'custom styles' exmaples? https://mdbootstrap.com/docs/jquery/forms/validation/#custom-styles

If you are using code from server-side you have to validate that form backend (PHP, Python or other backend programming language) to correctly see the value.


Juric pro premium answered 7 months ago

Hi, as I explained I use my own function to validate (I have no form at all) and just add classes 'invalid' and 'is.invalid' to the elements, which have no values.


Piotr Glejzer staff commented 6 months ago

Here is probably a problem with that you are not using 'form'. This is defaults Bootstrap form and it has to have a form. Even our example of datepicker and materialselect are using form. I don't even see your code about that validate problem. Regards.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: IE 11, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags