Barvoj free asked 6 years ago

Hi, I'm trying to render our forms using MDB (on server site). Now I'm stuck with displaying errors. According to doc I created text input with class invalid and label with data-error attribute:
<div class="md-form">
    <input type="text" name="username" class="form-control invalid text" id="frm-form-username">
    <label data-error="Not valid" for="frm-form-username">Username</label>
I do same thing for textarea:
<div class="md-form">
     <textarea name="about" class="md-textarea invalid" id="frm-form-about"></textarea>
     <label data-error="Not valid" for="frm-form-about">About</label>
But now red text "Not valid" shows above input red line insead of below red line. So it is in the midle of textarea. And for checkbox and radio it does not work at all:
<div class="md-form">
    <input type="checkbox" name="agree" class="form-control invalid" id="frm-form-agree">
    <label data-error="Not valid" for="frm-form-agree">Agree</label>
There is no red text "Not valid". Checkbox looks valid. What am I doing wrong?

@Barvoj, are you looking for something like this?

Barvoj free answered 6 years ago

For example in "user registration" user has to check checkbox "Accept terms and conditions", but he did not. He click on submit button, but checkbox is not checked. I would expect the checbox to be red with some red message "You have to accept terms and conditions".

Marta Wierzbicka staff answered 6 years ago

Hello, for textarea add this code in your CSS file: {
            width: 100px;
            top: 115px;
and about checkbox, How do you think 'not valid' checkbox should looks like? Because checkbox can't be 'not valid', it is checked or not. Best, Marta

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

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No