Topic: Validation classes done programmatically, why I have invalid, is-invalid classes, even by entering values?
at first I want to ask, why the code from your site (the first MDB Pro example): [https://mdbootstrap.com/docs/jquery/forms/validation/]
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)
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?
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
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:
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>
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?
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.
- 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