Error or Success Messages

Topic: Error or Success Messages

Barvoj asked 8 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>
</div>

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>
</div>

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>
</div>

There is no red text "Not valid". Checkbox looks valid. What am I doing wrong?

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

Hello, for textarea add this code in your CSS file:

textarea.md-textarea.invalid+label:after {
            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

Add comment

Barvoj answered 8 years ago

0 0 Best answer

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".

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago