顯示當表單提交或現場髒驗證消息 - 自定義顯示時提交

我有兩個問題與自定義消息都驗證信息並默認：顯示當表單提交或現場髒驗證消息 - 自定義顯示時提交

第一，拳頭時間我加載頁面的錯誤信息顯示時，我只想在表單被提交或字段髒（修改）時才顯示它們。

這是我的代碼：

<form class="form-horizontal name="newEventForm"> 
    <div ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert" > 
    <div ng-message="required">You did not enter a field</div> 
           <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form>

第二個問題我有是，當我提交表單它顯示了兩個消息，自定義消息，默認需要的信息。見上圖（你沒有輸入場是我的自定義消息）：

enter image description here

我想要做的Ajax調用時的形式是有效的

$scope.ajaxSend = function (action, dataoSend, newEventForm) { 
    if (newEventForm.$valid) { 
     $.ajax({ 
      type: 'POST', 
      url: "/" + _controller + "/" + action, 
      contentType: 'application/json; charset=utf-8',     
      success: function (data) { 
       $scope.table.reload(); 
      }, 
      error: function() { 
      } 
     }); 
    } 
};

來源

2015-05-22 Diego Unanue

爲了防止默認驗證，嘗試添加novalidate屬性窗體：

<form class="form-horizontal name="newEventForm" novalidate>`

你可以採取的優勢3210屬性和每個字段的$dirty屬性有條件地顯示消息。這樣的事情：

<div ng-show="newEventForm.$submitted || newEventForm.Name.$dirty" ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div>

來源

2015-05-22 20:05:00

它的工作完美，我現在唯一的問題是，我第一次加載頁面的領域有紅色像無效。在髒或表單提交時，可以只設置該類別？這是被檢查的字段：在加載頁面時有ng-invalid和ng-invalid-required。 –

當字段同時包含「ng-invalid」和「ng-dirty」類時，您將需要調整CSS以顯示紅色邊框。我在這裏找到了表單提交時的現有答案：http://stackoverflow.com/a/19131822/3256576。 –

顯示當表單提交或現場髒驗證消息 - 自定義顯示時提交

回答

相關問題