How to Write a Error Message When Wrong Value in Input in Javascript

josephloius asked 5 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!

---

Tanguy Lesseliers pro premium priority answered 4 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.

---

Bartłomiej Malanowski staff pro premium answered 5 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>

---

josephloius answered 5 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!

---

Juan Ramos Suyón answered 5 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.

---

Magdalena Obalska answered 5 years ago

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

---

Tanguy Lesseliers pro premium priority answered 4 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.

---

manuelcua pro answered 4 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; }

---

Please insert min. 20 characters.

How to Write a Error Message When Wrong Value in Input in Javascript

Source: https://mdbootstrap.com/support/general/adding-error-messages-to-text-input-fields/

Share this post