angularjs NG-验证MINLENGTH不工作，仍然表单提交 [英] angularjs ng-minlength validation is not working, form still being submitted

问题描述

我试图提交唯一成功的验证方式。
验证工作必需的，但不工作的NG-MINLENGTH个

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/

我在做什么错。

我不希望使用提交按钮禁用方法。

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

推荐答案

这是你做错了什么：你是混合两个概念，的角验证并
HTML5验证器。

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

在要求 HTML5验证，例如，说：

The required HTML5 validators, for instance, states that:

在present，它指定一个输入字段必须提交表单前填写。

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

所以，如果你尝试提交具有输入与此属性的表单，它会显示一个消息，说明该用户，它将prevent被发送的形式。这是你想要的行为。为什么不工作的 NG-MINLENGTH个？因为 NG-MINLENGTH个是一个角度验证器（你可以告诉，因为它是纳克开始 - ），它不会将任何特殊行为添加到窗体。它只是设置输入所在无效（因此，该表​​），并让你决定如何处理它。

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.

您有一个选择：你可以​​使用模式 HTML5验证器，指定字段需要至少11个字符。这将是这样的：

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,}">

所以，当你提交载有这些输入的表单，它不会被用户是否具有输入少于11个字符发送。

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

但由于我们是它，你已经在使用的模式验证器，你可以在它的全部潜力，使用常规的前pression，并定义是这样的：

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}" />

其中仅将07承认的11个字符，即起始值和仅包含数字。我修改了小提琴告诉你它是如何工作的： http://jsfiddle.net/helara/w35SQ/

这篇关于angularjs NG-验证MINLENGTH不工作，仍然表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！