angularjs ng-minlength validation is not working, form still being submitted

Question

I am trying to submit the form on only successful validation. validation is working for required but not working for ng-minlength

form input is invalid but form is still being submitted.

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
 <div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
        <label class="control-label" for="mobile">Mobile</label>
        <div class="controls">
            <input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11"  required />
            <span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
            <span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>           
        </div>
    </div>

     <div class="control-group">
        <div class="controls">                       
            <input  class="btn" type="submit" value ="submit" />
        </div>

         count: {{count}}<br />

<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
    </div>
</form>

http://jsfiddle.net/pMMke/9/

what am I doing wrong.

I don't want to use submit button disable method.

You might want to check [this](http://stackoverflow.com/questions/16263158/angularjs-prevent-form-submission-when-input-validation-fails) — maxdec, Aug 29 '13 at 16:16
Thanks @maxdec, I am curious why angularjs is not doing which it suppose to do. — Developer, Aug 29 '13 at 16:26

score 29 · Accepted Answer · answered Jan 16 '14 at 13:52

This is what you are doing wrong: you are mixing two concepts, Angular validators and HTML5 validators.

The required HTML5 validators, for instance, states that:

When present, it specifies that an input field must be filled out before submitting the form.

So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.

You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:

<input type="text" pattern=".{11,}">

So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.

But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:

<input type="text" pattern="07[0-9]{9}" />

Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/

In my case, it was not working because I was using `textarea` instead of `input` — toddmo, Oct 12 '15 at 19:13

score 5 · Answer 2 · edited Jan 15 '16 at 06:45

5

I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.

edited Jan 15 '16 at 06:45

naXa stands with Ukraine

35,493
19
190
259

answered Oct 19 '15 at 09:22

Aqib Mumtaz

4,936
1
36
33

score 3 · Answer 3 · edited Jan 16 '16 at 13:30

3

Both ng-minlength & mg-maxlength works in AngularJS. I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.

edited Jan 16 '16 at 13:30

naXa stands with Ukraine

35,493
19
190
259

answered Oct 29 '14 at 19:34

chaitu301

69
13

4

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – jgritty Oct 29 '14 at 20:13
@jgritty I believe this **does** provide an answer. – naXa stands with Ukraine Jan 16 '16 at 13:33

score 2 · Answer 4 · edited Aug 24 '16 at 18:35

2

This should work:

To enter mobile number

ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"

For minimum length

ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"

For maximum length

ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"

edited Aug 24 '16 at 18:35

Thalaivar

23,282
5
60
71

answered Jul 27 '16 at 09:37

GirishBabuC

1,267
15
20

score 1 · Answer 5 · answered Apr 12 '17 at 18:36

This work for me guys

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
        <label class="mdl-textfield__label" for="cpf">CPF *</label>
    </div>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>

score 0 · Answer 6 · answered Oct 24 '13 at 13:39

0

I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.

answered Oct 24 '13 at 13:39

Rafa

2,328
3
27
44

angularjs ng-minlength validation is not working, form still being submitted

6 Answers6

To enter mobile number

For minimum length

For maximum length

Linked