Question

我在.NET MVC cshtml文件中的angularjs验证无效。

以下是我的代码：

cshtml代码：

<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">&times;</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>

控制器代码：

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;
    }
});

addEditItem是一个模态对话框。如果我点击提交警报（'获取记录时出错'）;显示。我希望验证发生在cshtml级别而不是java警报。

我将删除CheckIsValid函数。我希望验证只在cshtml文件中发生。

知道发生了什么事吗？

Answer 1

在您附加的cshtml代码中，我可以找到＆＃34; name＆＃34;仅限ID，但您的检查功能还在检查＆＃34;说明＆＃34;，＆＃34;制造商＆＃34;和＆＃34; batchNo＆＃34;。所有这些项必须存在，否则函数返回false。当所有项目都存在且包含至少一个字符时，CheckIsValid（）函数将返回true。无论如何，良好的开端是在您的检查代码中加入一个断点，看看为什么返回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>

想添加您需要添加：

使用输入上的名称可以从范围
使用ng-show / ng-hide进行验证，因为它会发生很多变化

.NET CSHTML文件中的AngularJS验证

2 个答案: