angularjs ng-minlength 验证不起作用，表单仍在提交中 [英] angularjs ng-minlength validation is not working, form still being submitted

问题描述

我正在尝试仅在成功验证后提交表单.验证适用于必需但不适用于 ng-minlength

表单输入无效，但表单仍在提交中.

<div class="control-group" ng-class="{error: myForm.mobile.$invalid}"><label class="control-label" for="mobile">Mobile</label><div class="控件"><input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required/><span ng-show="myForm.mobile.$error.required" class="help-inline">必需</span><span ng-show="myForm.mobile.$error.minlength" class="help-inline">手机号码应至少为 11 个字符，从 07 开始</span>

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

计数:{{count}}
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>

</表单>

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

我做错了什么.

我不想使用提交按钮禁用方法.

解决方案

这就是你做错了:你混淆了两个概念，Angular 验证器 和HTML5 验证器.

必需 HTML5 验证器，例如，声明:

<块引用>

如果存在，它指定必须在提交表单之前填写输入字段.

因此，如果您尝试提交具有此属性的输入的表单，它将显示一条消息向用户解释这一点，并且会阻止发送该表单.这是您想要的行为.为什么对 ng-minlength 不起作用?因为 ng-minlength 是一个 Angular 验证器(你可以知道，因为它以 ng- 开头)，并且它不会向表单添加任何特殊行为.它只是将其所在的输入设置为无效(以及表单)，然后让您决定如何处理它.

您有一个选择:您可以使用 模式 HTML5 验证器，指定至少需要 11 个字符的字段.它会是这样的:

因此，当您提交包含此输入的表单时，如果用户输入的字符少于 11 个，则不会发送该表单.

但是既然我们就是这样，并且您已经在使用模式验证器，您可以充分利用正则表达式，并定义如下内容:

它只允许以07"开头且仅包含数字的 11 个字符的值.我已经修改了你的小提琴以向你展示它是如何工作的:http://jsfiddle.net/helara/w35SQ/

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.

解决方案

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/

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