Input Error Bug

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Input Error Bug

itdev pro asked 7 years ago

The <small class="text-danger"> tag under the label is not displaying the error for the input right under the bar.

 

<div class="md-form">
 <i class="fa fa-envelope fa-fw prefix"></i>
 <input mdbActive type="email" class="form-control" id="form9" name="email"mdbInputValidate>
 <label class="active" for="form9">Type your e-mail</label>
 <small class="text-danger">Invalid Email</small>
</div>

 

 

Damian Gemza staff answered 7 years ago

Hello, Please use this sample code: 
<div class="md-form">

<i class="fa fa-envelope prefix"></i>

<input mdbActive type="text" class="form-control counter-danger" id="form9" name="email" mdbInputValidate>

<span class="inputVal text-danger my-5">invalid format</span>

<label class="active" for="form9">Type your e-mail</label>

</div>
Now it should works good. If not, please let me know.
Best Regards,
Damian

arcusscale pro commented 7 years ago

The code you provided does not work. The red text is always visible about 50px below the input field https://mdbootstrap.com/angular/components/inputs/#input-fields

Damian Gemza staff commented 7 years ago

Could you share me a screen or your's code?

itdev pro answered 7 years ago

<div class="container">
<form>
<divclass="md-form">
<iclass="fa fa-envelope prefix"></i>
<input mdbActive type="text"class="form-control counter-danger" id="form9"name="email" mdbInputValidate>
<span class="inputVal text-danger my-5">invalid format</span>
<label class="active"for="form9">Type your e-mail</label>
</div>
</form>
</div>

arcusscale pro commented 7 years ago

How can I upload an image? I took a screen shot

Damian Gemza staff commented 7 years ago

Hello dear arcusscale, Please if you want to validate email, instead of type="text" please use type="email". For now, we validate only two types: email and password. In next update we will add extended support for validating other types of inputs. And then you could delete with invalid format text. Best Regards, Damian

Damian Gemza staff commented 7 years ago

Here i paste you your's code with those changes. If you want to edit wrong or success message, please head to input-validate.directive.ts file located in:/free/inputs/input-validate.directive.ts   <div> <pre><form> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input mdbActive type="email" class="form-control" id="form9" name="email" mdbInputValidate> <label class="active" for="form9">Type your e-mail</label> </div> </form></pre> </div>

itdev pro answered 7 years ago

I am going to close this issue. I create a custom error message since your validation is very limited. Please do let me know when you make enhancements past version 5.1.1

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
itdev
Pro User
124Support score
19Questions 10Answers
0Snippets likes 0Snippets