To do this, we need to use novalidate attribute on the form to avoid browser validating the form but is passed to JavaScript to perform manual validation. In addition, we can utilise ng-submitted class that is added to the form by AngularJS after it is submitted.
The view:
<body ng-app="validationExample">
<div ng-controller="MyCtrl as vm">
<form name="myForm" novalidate ng-submit="vm.submitted(myForm, vm.input)">
<input type="text" name="name" ng-model="vm.input.name" placeholder="please enter text" required/>
<span ng-show="myForm.name.$error.required == true">*</span>
<input type='text' name="value" ng-model='vm.input.value' placeholder="a number greater than 0" required ng-pattern='/^([1-9][0-9]*(\.[0-9]+)?|0+\.[0-9]*[1-9][0-9]*)$/'>
<span ng-show="myForm.value.$error.required == true">*</span>
<button>submit</button>
</form>
</div>
</body>
The script:
var myApp = angular.module('validationExample', [])
myApp.controller('MyCtrl', [function () {
var vm = this;
vm.submitted = function(form, input) {
if(form.$valid) {
alert('submitted');
}
}
} ]);
The stylesheet:
.ng-submitted input.ng-invalid {
border-color:red;
}
See the example in Plunker.
To read more about form validation, please see my previous post.
