1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Adding error messages to text input fields

josephloius free asked 7 years ago

Hi, I see I can validate some aspects of the inputs like: <!--Email validation--> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="email" id="form9" class="form-control validate"> <label for="form9" data-error="wrong" data-success="right">Type your email</label> </div> However, I am already using a backend (Flask) where I compute validations for the forms. So I can actually dynamically alter the HTML code of the forms whenever there are errors. Then my question is, how can I add custom errors to the form fields following the mdbootstrap look&field? I mean, how are these errors added if I want to do it writting plain html? Which new divs, classes, etc. I have to include/modify? Thanks!

manuelcua pro answered 6 years ago

I found a fix for the text wrapping, you need to add this CSS: 
input[type=date].invalid+label:after, input[type=date]:focus.invalid+label:after, input[type=datetime-local].invalid+label:after, input[type=datetime-local]:focus.invalid+label:after, input[type=email].invalid+label:after, input[type=email]:focus.invalid+label:after, input[type=number].invalid+label:after, input[type=number]:focus.invalid+label:after, input[type=password].invalid+label:after, input[type=password]:focus.invalid+label:after, input[type=search-md].invalid+label:after, input[type=search-md]:focus.invalid+label:after, input[type=search].invalid+label:after, input[type=search]:focus.invalid+label:after, input[type=tel].invalid+label:after, input[type=tel]:focus.invalid+label:after, input[type=text].invalid+label:after, input[type=text]:focus.invalid+label:after, input[type=time].invalid+label:after, input[type=time]:focus.invalid+label:after, input[type=url].invalid+label:after, input[type=url]:focus.invalid+label:after, textarea.md-textarea.invalid+label:after, textarea.md-textarea:focus.invalid+label:after {
    white-space: nowrap;
}

Magdalena Obalska free commented 6 years ago

@manuelcua, thank you for sharing your solution.

Tanguy Lesseliers pro commented 6 years ago

@manuelcua, works as a charm ! Thank you The message was still displayed much lower than the field, so I added transform: translateY(-150%); kr Tanguy

manuelcua pro commented 6 years ago

@Tanguy_Lesseliers No need to add that, you have to add the class "form-control" to your input and it will display correctly just under the input field line.

Tanguy Lesseliers pro commented 6 years ago

Hi Magdalena, input has follwoing class = class="form-control validate" remove "validate"?

Tanguy Lesseliers pro answered 6 years ago

It's not quite ok yet. the message is displayed, but it like squeezed.   I tested with <label for=”form9″ data-error=”Nope, not ok. The input is not as expected” data-success=”right”>Type your email</label> and it gives the same issue. ( follow the link to the image) I guess I need to change the CSS but, can't figure out what.

manuelcua pro commented 6 years ago

Yes, I get the same error, please where do I fix the squeezed text

Tanguy Lesseliers pro answered 6 years ago

Hi ,

I'm using laravel with mdboostrap.

I made a register modal and I'm using the form validation. when I submit the data to laravel 5.4 it can respond with an additional validation error. e.g. "email already registered". I managed to set this content in the "data-error" , ( attribute is present in the label) , but how can I get this displayed?

This is the email control in the registering modal:

<!-- email -->
<div class="row">
<div class="col-md-12">
<div class="md-form form-sm">
<i class="fa fa-envelope darken-4 prefix"></i>
<input type="email"
name="email"
id="email"
class="form-control validate"
tabindex="6">
<label for="email">@lang('login.register.label.email')</label>
</div>
</div>
</div>

this is the javascript to handle the error json response

.fail(function(data) {
$.each(data.responseJSON, function (key, value) {
var input = '#formRegister input[name=' + key + ']';
$(input + '+label').attr('data-error',value);
});

This is the final result :

<label for="email" class="active" data-error="L'adresse e-mail doit être unique">E-mail</label>

However the message is not visible.

Tanguy Lesseliers pro commented 6 years ago

found out that adding "invalid" as class to the control actually shows the error. However, the error is shown in a very small block and thus making it hard to read. <a href="https://drive.google.com/file/d/0B7tvep-UmnD1MHNvM3JUUVBBdlk/view?usp=sharing">Example screenshot</a>

Magdalena Obalska free commented 6 years ago

Ok, I'm glad, that you found out what the problem is. Thank you for the message. 

Magdalena Obalska free answered 7 years ago

Hey, could you say more precisely what's wrong with triggering these input fields messages and what do you want to get?

Juan Ramos Suyón free answered 7 years ago

I have the same question. How we can trigger the error message? I am validating server side, and the error messages have to be shown initially. Someone know how to do that? Please give some ideas. Thanks.

josephloius free answered 7 years ago

But how can I trigger that message? How can I manually set with HTML that I want the message displayed? Also, I would like to stack various error message rows, that is why I asked for the HTML code / css style for the errors. Thanks!

Bartłomiej Malanowski staff answered 7 years ago

You can simply set error/success message by changing the label: <label for="form9" data-error="E-mail address seems to be invalid" data-success="What a good e-mail">Type your email</label>
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
josephloius
10Support score
1Questions 1Answers 0Snippets