AngularJS validations in .NET CSHTML files - angularjs

Question

My angularjs validation in .NET MVC cshtml files isnt working.
Below is my code:
cshtml code:
<div id="addEditItem" class="modal" role="dialog">
<form novalidate role="form" name="frmItem">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item Details</h4>
</div>
<div class="modal-body">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-if="frmItem.name.$error.required && frmItem.name.$dirty">*</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-success" ng-click="SaveItem()"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
</div>
</form>
</div>
Controller Code:
medApp.controller("itemController", function ($scope, itemService) {
$scope.SaveItem = function () {
var itemModel = {
Id: $scope.id,
Name: $scope.name,
Description: $scope.description,
Manufacturer: $scope.manufacturer,
BatchNo: $scope.batchNo,
ExpiryDate: $scope.expiryDate
};
if (!CheckIsValid()) {
alert('Please fill the detail!');
return false;
}
var requestResponse = itemService.AddEdit(itemModel);
Message(requestResponse);
};
function CheckIsValid() {
var isValid = true;
if ($('#name').val() === '' || $('#description').val() === '' || $('#manufacturer').val() === '' || $('#batchNo').val() === '') {
isValid = false;
}
return isValid;
}
});
The addEditItem is a modal dialog. If I click on submit the alert('Error in getting records'); is shown.
I want the validation to happen at cshtml level rather than the java alert.
I am going to remove the CheckIsValid function. I want the validation to happen only in cshtml file.
Any idea what's going on?

Answer 1

In your attached cshtml code I could find the "name" id only, but your check function is also checking"description", "manufacturer" and "batchNo". All of those item must be exist otherwise the function returns with false.
The CheckIsValid() function will return true when all items exists and contains at least one character. Anyway the good start is to put a breakpoint into your check code and see why returns with false.

Answer 2

Wordking fiddle
<form name="myForm">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-show="myForm.name.$error.required && !myForm.name.$valid">*</span>
</div>
<button ng-click="display()">Log</button>
</form>
Would like to add that you need to add:
Use name on inputs to be accesable from the scope
Use ng-show/ng-hide for validation since it changes alot