I have implemented validation on my form (which consists of only two fields) but I am struggling to figure out how to prevent it from being submitted with empty data. The current flow is as follows: Upon pressing the enter key, the student's name and marks are added to local storage and displayed on the screen. However, I need to find a way to prevent submission of empty data.
Below are my JavaScript functions:
$scope.searchEnter = function() {
if (event.which == 13 && $scope.student != "") {
$scope.addStudent();
}
};
$scope.addStudent = function() {
if ($scope.marks > 65) {
var pass = true;
} else {
pass = false;
}
$scope.students.push({ 'studentName': $scope.student, 'Marks': parseInt($scope.marks), 'pass': pass });
$scope.student = '';
$scope.marks = '';
localStorage['studentsList'] = JSON.stringify($scope.students);
};
Here is the HTML portion:
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" novalidate name="studentForm" >
<div class="form-group">
<label class="col-sm-2 control-label" for="student_name">Student's Name</label>
<div class="col-sm-5">
<input ng-model="student" ng-keyup="searchEnter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">
<div ng-show="studentForm.stdname.$touched && studentForm.stdname.$invalid">
<small style="color:red; display:block;">Enter a valid name </small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="student_marks">Marks obtained</label>
<div class="col-sm-5">
<input ng-model="marks" ng-keyup="searchEnter()" type="number" class="form-control" id="student_marks" ng-required="true">Press ENTER to insert student's data in the table.</div>
</div>
</form>
</div>
</div>