Question

提交表单标签我想显示自定义错误消息

我的表格是

<form class="form-horizontal" role="form" id="new-session-form" name="saveSessionForm" ng-model="saveSessionForm" ng-submit="saveSession()" novalidate>

<textarea class="form-control" name="sessionTopic" ng-model="session.topic" required></textarea>

<div ng-show="submitted && saveSessionForm.sessionTopic.$error.required" class="error">Session Name cannot be blank.</div>

<button type="submit" class="btn btn-sm ng-click="submitted=true">Save</button>

当我从表单标签中删除novalidate时能够看到自定义验证错误消息...

但是如果在表单标签中写入novalidate然后单击按钮我将无法看到自定义验证错误消息..

我做错了什么......请帮忙......

Answer 1

根据您更新的要求进行编辑：

对HTML中的元素进行单独验证：

<textarea class="form-control" name="sessionTopic" ng-model="session.topic" required></textarea>
<div ng-show="saveSessionForm.sessionTopic.$error.required" class="error">Session topic cannot be blank.</div>

在控制器中，使用$valid验证整个表单：

 $scope.saveSession = function(){
        if($scope.saveSessionForm.$valid){
            alert("Saving");       
        }
    }

<强> DEMO

实现这一目标的两种方法：

首先，如果您想在提交时进行验证：

<div ng-show="errorExists" class="error">Session Name cannot be blank.</div>

$scope.saveSession = function(){
    if ($scope.saveSessionForm.$valid) {
       $scope.errorExists = false;
        alert("Saving");
    } else {
       $scope.errorExists = true;
    }                
}

DEMO

其次，在输入和删除时：

<div ng-show="saveSessionForm.$valid" class="error">Session Name cannot be blank.</div>

<强> DEMO

/////////////////////////////////////////////// //////////////////////////////////////////////

novalidate基本上意味着表单不会在提交时验证： http://www.w3schools.com/tags/att_form_novalidate.asp

因此，您在技术上告诉它验证[使用required]，然后使用novalidate取消。这就是为什么除非你删除novalidate，否则它将无效。

换句话说，novalidate会覆盖required。如果您想要提出自己的JavaScript验证规则，可能需要使用它。

当表单中给出无效时，Angularjs形成验证错误

1 个答案: