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

Last Reply 10 days ago By dharmendr

Posted 10 days ago

Hi,

I am using Angularjs and MVC. I try to do input validation with Angularjs but not working HtmlBeginForm. How can I do ?

 HTML

        <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())
                        {
                            @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>

AngularJS

var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope) {
    $scope.user = {
        name: {
            required: true,
            minlength: 5,
            maxlength: 25           
        }
    };   
});
You are viewing reply posted by: dharmendr 10 days ago.
Posted 10 days ago

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