AngularJS 验证提交

Posted 2023-05-09

【中文标题】AngularJS 验证提交

【英文标题】：AngularJS validation on submit

【发布时间】：2016-03-05 02:14:40

【问题描述】：

我有一个注册表单，我希望在用户单击提交时进行验证。这是 html 的样子：

<form ng-submit="RegistrationC.fireReg()" novalidate name="register">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" autocomplete="off" class="form-control" placeholder="First Name" ng-model="RegistrationC.first_name" required name="first_name">
                    <div class="help-block" ng-messages="register.first_name.$error" ng-show="submitted && register.first_name.$error">
                        <p ng-message="required">This field is required.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 form-group col-md-offset-3">
            <button type="submit" class="btn btn-success btn-block" ng-click="submitted=true">Register Now</button>
        </div>
    </div>
</form>

如果没有输入用户名，它会显示验证消息，但它仍然提交。我错过了什么？

编辑 1

//init.js - RegistrationController
reg_list.fireReg = function () 
    var url = 'user/register';
    api.makeCall(reg_list, url)
        .then(function (response) 
            reg_list.response = response;
            console.warn(response);
            $location.path('/user/verify');
        )
        .catch(function (errorMessage) 
            console.log("got an error in initial processing", errorMessage);
            event.restoreButton();
        );
;

我知道这个功能有问题，我会在稍后修复它们。

【问题讨论】：

你也可以添加RegistrationC.fireReg()的代码。还有为什么novalidation 在表单中？

嗨@Rajesh，我不希望触发 HTML5 验证。 :)

Angularjs prevent form submission when input validation fails的可能重复

novalidate 是防止原生浏览器验证，使用是正确的

基本上，您需要在提交处理程序中检查formname.$valid。

【参考方案1】：

仅在有效的情况下提交此表格。 <whatever_form_name>.$valid

<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

【讨论】：

如果我把register.$valid放在第一位就可以了。谢谢！

@Bilal nope buddy && 条件将一直执行，直到它结束或发现为假。在您的回答中，首先将转到函数并开始执行该方法，然后它将进行验证检查。这怎么会停止提交表单？

【参考方案2】：

在提交表单之前添加表单是否有效的检查点

这样试试

<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

【讨论】：

要赞成这个，因为它是正确的，但问题首先由@Bilal 回答。

【参考方案3】：

如果你想禁用 html5（或浏览器）验证器，你必须在你的 html 代码中删除 'required' 属性

http://www.the-art-of-web.com/html/html5-form-validation/

http://www.w3schools.com/tags/att_input_required.asp