How can I display an error message min 3 char at the bottom of an input field when only 1 character is entered?
Referencing this example:
https://i.sstatic.net/Eujle.png
Currently, the error message appears on the right side of the input field.
https://i.sstatic.net/XfRP5.png
Is there a better solution than using the <br> tag?
I attempted a solution by adding the following CSS properties to the .lastName class, but it did not work as expected.
.lastName {
color: blue;
bottom: 10px;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
<input type="submit" value="Save" />
</form>
</body>
</html>