Validation is not working in Metronic UI. Why?

Question

Validation is not working properly. Its always shows This field is required. Even if I don't touch this field. Why?

<div class="form-group">
 <label class="control-label col-sm-4">Description<span class="required"> * </span></label>
  <div class="col-sm-8">
    <input type="text" name="name" data-required="1" class="form-control" aria-required="true" aria-invalid="true" aria-describedby="name-error">
      <span id="name-error" class="help-block help-block-error">This field is required.</span>
  </div>
</div>

hi, Metronic is included in Aspnet Zero. Are you using Aspnet Zero? — Alper Ebicoglu, Sep 05 '17 at 07:41
@JeffMattson means user has not done anything with this field. — Vivek Nuna, Sep 13 '17 at 02:45
validation using forms in Angular [reactive forms](https://rahulrsingh09.github.io/AngularConcepts/reactive) and [teamplate driven forms](https://rahulrsingh09.github.io/AngularConcepts/template) — Rahul Singh, Sep 13 '17 at 04:21
You have a span with "*This field is required*", how are you hiding it ? And I am not able to reproduce the issue, can you create an example. — bhansa, Sep 13 '17 at 05:31

Jeff Mattson · Accepted Answer · 2017-09-12T19:35:43.987

1

You could try adding the name="name" to the label.

Also add for="name" to the label.

edited Sep 12 '17 at 19:35

answered Sep 11 '17 at 14:14

Jeff Mattson

394
3
9

It also looks like you have `class="required"` on the label. I may mis-understand your question but doesn't that make the field required? Of course only if you associate the label with the input field by adding the `for="name"` above. If you don't want it to be a required field remove the `class="required"`. – Jeff Mattson Sep 12 '17 at 19:38

score 0 · Answer 2 · answered Jan 16 '20 at 08:08

Label's "for" attribute is bound to HTML element by element_id.

Remove the class="required" on the label and add required attribute to the input field if is needed.

<label for="element_id">
<input type="text" id="element_id" required>
<div class="help-block with-errors"></div>

Validation is not working in Metronic UI. Why?

2 Answers2