Set empty input field to ng-invalid on submit using AngularJS?
25,532
I'm not sure I completely follow, but does this do what you want?
Plunker:
http://plnkr.co/edit/L5qzEJRKkdGogsE7IzAr?p=preview
HTML:
<form name="signUpForm" ng-submit="submitUser()" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<br>
<input type="text" name="email" ng-class="{ errorinput: submitted && signUpForm.email.$invalid }" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required />
<span class="e" ng-show="submitted && signUpForm.email.$invalid">Please provide a valid email address</span>
<br>
<button type="submit">Submit</button>
</form>
Javascript:
$scope.submitUser = function() {
if ($scope.signUpForm.$valid) {
} else {
$scope.submitted = true;
}
}
Author by
CodeEngie
Updated on February 05, 2020Comments
-
CodeEngie about 4 years
I want to set input field to ng-invalid if a user clicks submit and the form fields are empty using AngularJS. I know a directive can be used to custom form validation and using $setValidity to manually set the input field but I'm not sure I need a directive to just highlight the empty/required fields on submit. Any help would be greatly appreciated. Thank you.
Here is the code I am working with: HTML
<form name="SignUpForm ng-submit="submitUser()" novalidate> <input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required /> <span class="error" ng-show="signUpForm.dob.$dirty && signUpForm.dob.$invalid">Please provide a valid date of birth</span> <input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required /> <span class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Please provide a valid email address</span> <button type="submit">Submit</submit> </form>
SASS/CSS
input { &.ng-valid.ng-dirty { color: #fff; background-color: rgba(146, 253, 156, 0.5); border-color: #92fd9c; box-shadow: inset 2px 2px 2px #92fd9c; } &.ng-invalid.ng-dirty { color: #850000; background: rgba(254, 186, 186, 0.5); border: 1px solid #850000; }
AngularJS
$scope.submitUser = function() { if ($scope.signUpForm.$valid) { // Set form values & construct data to send } else { $scope.response = "Please fill in the required fields"; }