Angularjs形式驗證錯誤時的novalidate在表單標籤的提交我想顯示自定義錯誤消息的形式

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

2種方法來實現這一目標：

首先，如果你想在提交驗證：

<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驗證規則，你可能想要使用它。