[Solved] AngularJS input form validation skipped when using Html.BeginForm in ASP.Net MVC

Hi AliYilmaz,

When you use form tag inside Html.BeginForm at that time there are nested form tag generated while rendering the page.

So because of nested form tag html is considered as invalid. So it just skips the validation.

To solve the issue remove the form tag and assign name and role attribute to the Html.BeginForm like below.

View

<div ng-app="MyApp">
    <div class="row" ng-controller="myCtrl">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    Slider Ekle
                </div>
                <div class="panel-body">
                    @using (Html.BeginForm(null, null, FormMethod.Get, new { name = "form", role = "form" }))
                    {
                        @Html.AntiForgeryToken()
                        @*<form name="form" role="form">*@
                        <div class="form-group">
                            <label>Dil Seç</label>
                            <select name="dil" class="form-control">
                                <option>Türkçe</option>
                                <option>İngilizce</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Özet</label>
                            <input type="text" name="name" ng-model="name" ng-minlength='{{user.name.minlength}}' ng-maxlength="{{user.name.maxlength}}" ng-required='user.name.required' />
                            <span ng-show="form.name.$dirty && form.name.$error.required">Name is required!</span>
                            <span ng-show="form.name.$error.minlength">Input is too short!</span>
                            <span ng-show="form.name.$error.maxlength">Input is too long!</span>

                        </div>
                        <div class="form-group">
                            <label>İçerik</label>
                            <textarea class="form-control" name="icerik" placeholder="İçerik" rows="5" id="comment"></textarea>
                        </div>
                        <button type="submit" class="btn btn-info">Kaydet</button>
                        @*</form>*@
                    }
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('myCtrl', function ($scope, $http) {
        $scope.user = {
            name: {
                required: true,
                minlength: 5,
                maxlength: 25
            }
        };
    });
</script>

Screenshot