I am currently working on a form that allows users to input data. I am facing an issue where if a user enters a number, deletes it, and moves away from the input field, it will display an error message. However, I want the error message to display only if a user clicks into the field and then clicks out without adding a number. I am puzzled as to why the onblur event is not functioning as expected, especially since I followed two tutorials that used the same approach.
<form name="myform" novalidate>
<table class="text-center margin-top">
<tr>
<th class="header">Course Type</th>
<th>Amount of Times</th>
<th>Frequency (PA)</th>
<th>% Staff who need it</th>
</tr>
<tr>
<td class="header"><label for="induction">Induction:</label></td>
<td><input class="form-control" type="number" id="inductionAmount" name="inductionAmount" ng-model="staff.inductionAmount" ng-model-options="{ updateOn: 'blur' }" ng-required="true" /></td>
<span class="error-message" ng-show="!myform.inductionAmount.$pristine && myform.inductionAmount.$error.required">Please enter an induction value</span>
<td><input class="form-control" type="number" id="inductionFrequency" name="inductionFrequency" ng-model="staff.inductionFrequency" ng-required="true" /></td>
<span class="error-message" ng-show="myform.inductionFrequency.$dirty && myform.inductionFrequency.$error.required">Please enter an induction value</span>
<td><p>100</p></td>
</tr>
</table>
</form>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" ng-disabled="myform.$invalid" class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button>
</div>
</div>