Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

C:\Users\Deutsch\Desktop\demoo\Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4 - Dotnet Awesome.
html
Sunday, June 28, 2015 8:04 PM
<!DOCTYPE html>

<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch
geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths"><head>
<style type="text/css">
.tagContainer
{
/*max-width:280px;
border:1px solid #f3f3f3;
width:300px;*/
}
.tagContainer ul
{
padding:0px;
margin:0px;
list-style:none;
}
.tagContainer li
{
float: left;
margin: 5px 2px 2px 4px;
background-color: #3b8dbd;
padding: 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
}
.tagContainer a
{
display: block;
line-height: 25px;
padding: 2px 10px;
color: #FFFFFF;
text-decoration: none;
text-transform:uppercase;
font-size: 13px;
}
-1-
C:\Users\Deutsch\Desktop\demoo\Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4 - Dotnet Awesome.html
.tagContainer a:hover
{
background-color:#BDBD3B;
color:#000;
}
</style>
<style>
.glyphicon {
margin-right: 4px !important; /*override*/
}
.pagination .glyphicon {
margin-right: 0px !important; /*override*/
}
.pagination a {
color: #555;
}
.panel ul {
padding: 0px;
margin: 0px;
list-style: none;
}
.news-item {
padding: 4px 4px;
margin: 0px;
border-bottom: 1px dotted #555;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
@charset
"UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.n
g-hide-animate){display:none !important;}ng\:form{display:block;}</style>
<meta charset="utf-8">
<meta name="keywords" content="simple form using angularJS and asp.net MVC4, simple form
using angularJS, simple form with validation using angularJS, form validation in angularJS,
post in angularJS, save data to database angularJS, create registration form using
angularJS, create login form in angularJS">
<meta name="description" content="In the previous example we have seen Part 3 - How to
create a login page using AngularJS in MVC4 application. Here in this post I explained how
can we create simple registration form with validation using angularjs and asp.net mvc4. As
registration form is a very common form for Internet application, so I would like to create
a simple registration form here to demonstrate validation and Save data to the database.">
<title>Part 6 - How to create simple registration form with validation using angularjs and
asp.net mvc4 - Dotnet Awesome</title>
<link href="http://dotnetawesome.com/favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no">
<link href="http://dotnetawesome.com/Content/FBPopup.css" rel="stylesheet">
<link href=
-2-
"http://dotnetawesome.com/Content/css?v=kf9EQ3TQ1rvCfqG7KLkaEZdjnAchOkv7EYbTkOuD-Xo1" rel=
"stylesheet">
<script async="" src="./Part 6 - How to create simple registration form with validation
using angularjs and asp.net mvc4 - Dotnet Awesome_files/analytics.js"></script><script src=
"./Part 6 - How to create simple registration form with validation using angularjs and
asp.net mvc4 - Dotnet Awesome_files/modernizr"></script><style type="text/css">
</style>
<script src="./Part 6 - How to create simple registration form with validation using
angularjs and asp.net mvc4 - Dotnet Awesome_files/jquery"></script>
<link href="http://dotnetawesome.com/Content/bootstrap/bootstrap.css" rel="stylesheet">
angularjs and asp.net mvc4 - Dotnet Awesome_files/bootstrap.js"></script>
angularjs and asp.net mvc4 - Dotnet Awesome_files/FBPopup.js"></script>
angularjs and asp.net mvc4 - Dotnet Awesome_files/jquery.bootstrap.newsbox.min.js"></script>
<script type="text/javascript">
stLight.options({ publisher: "cf296731-9fa8-4b49-b94f-fb801b0728d5", shorten: false });
</script>
<script type="text/javascript" async="" src="./Part 6 - How to create simple registration form
with validation using angularjs and asp.net mvc4 - Dotnet Awesome_files/embed.js"
></script><script async="" type="text/javascript" src="./Part 6 - How to create simple
registration form with validation using angularjs and asp.net mvc4 - Dotnet
Awesome_files/count.js"></script><script type="text/javascript" src="./Part 6 - How to create
simple registration form with validation using angularjs and asp.net mvc4 - Dotnet
Awesome_files/getAllAppDefault.esi"></script><script type="text/javascript" src="./Part 6 - How
to create simple registration form with validation using angularjs and asp.net mvc4 - Dotnet
Awesome_files/checkOAuth.esi"></script><link rel="stylesheet" type="text/css" href="./Part 6 How to create simple registration form with validation using angularjs and asp.net mvc4 Dotnet Awesome_files/buttons.096692daff8b1e9d4dd6b4d8973e12a8.css"></head>
<body>
<div>

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="http://dotnetawesome.com/" class="navbar-brand"> Dotnet Awesome</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=
-3-
"#navbar-main">
<span class="icon-bar" st_title=""></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li><a href="http://dotnetawesome.com/" title="Home">Home</a></li>
<li><a href="http://dotnetawesome.com/About" title="About">About</a></li>
<li><a href="http://dotnetawesome.com/Question" title="Question And
Answare">Q&A</a></li>
<li><a href="http://dotnetawesome.com/Sitemap" title="Sitemap">Sitemap
</a></li>
<li><a href="http://dotnetawesome.com/Contact" title="Contact">Contact
</a></li>
<li><a href="http://dotnetawesome.com/mvc/mycontactbook" title="Project"
>Project<span style="display: inline-block; position: relative; top:
-7px; left: 0px; font-size: 10px; color: red; font-weight: bold;">New!
</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Hello, kutay zorlu !
<a href=
"http://dotnetawesome.com/LogOff?retUrl=/angularjs/how-to-createsimple-registration-form-with-validation-using-angularjs-and-aspn
et-mvc4" style="display:inline-block">Log Off</a>
</li>
<li><a href="http://dotnetawesome.com/forgotpassword">Change
Password</a></li>
</ul>
</div>
</div>
</div>

<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-sm-12">
<h1></h1>
</div>
</div>
<div class="col-sm-12">
<div style="margin-top: 20px; padding-left: 15px;">

</div>
</div>
</div>
<div class="page-body">
<div class="row">
<div class="col-md-8 col-sm-7">
<div class="demoArea ng-scope" ng-app="MyApp">

<h5>Simple Registration Form</h5>
<div ng-controller="Part6Controller" style="overflow: hidden;" class="form-horizontal
ng-scope" ng-submit="SaveData(User)">
<form name="f1" novalidate="" class="ng-pristine ng-invalid ng-invalid-required
ng-valid-email ng-valid-minlength">
<div style="color:red" ng-show="message=='Success'" class="ng-hide">You can
login from here <a href="http://dotnetawesome.com/angular/part3">Login</a></div>
<div class="form-group">
<label for="uFullName" class="col-md-2 control-label">Full Name :</label>
<div class="col-md-10">
<input type="text" ng-model="User.FullName" name="uFullName" class=
"form-control ng-pristine ng-invalid ng-invalid-required ng-touched"
ng-class="submitted?'ng-dirty':''" required="" autofocus="">
<span class="error ng-hide" ng-show="(f1.uFullName.$dirty || submitted)
&& f1.uFullName.$error.required" st_title="">Fullname required!
</span>
</div>
</div>
<label for="uEmailID" class="col-md-2 control-label">Email ID :</label>
<input type="email" ng-model="User.EmailID" name="uEmailID" class=
"form-control ng-pristine ng-untouched ng-valid-email ng-invalid
ng-invalid-required" ng-class="submitted?'ng-dirty':''"
required="" autofocus="">
<span class="error ng-hide" ng-show="(f1.uEmailID.$dirty || submitted)
&& f1.uEmailID.$error.email" st_title="">Email ID not valid!</span>
</div>
</div>
<label for="uFullName" class="col-md-2 control-label">Username :</label>
<input type="text" ng-model="User.Username" name="uUsername" class=
"form-control ng-pristine ng-untouched ng-invalid ng-invalid-required"
ng-class="submitted?'ng-dirty':''" required="">
<span class="error ng-hide" ng-show="(f1.uUsername.$dirty || submitted)
-5-
&& f1.uUsername.$error.required" st_title="">Username required!

</span>
</div>
</div>
<label for="uFullName" class="col-md-2 control-label">Password :</label>
<input type="password" ng-model="User.Password" name="uPassword" class=
"form-control ng-pristine ng-untouched ng-invalid ng-invalid-required
ng-valid-minlength" ng-class="submitted?'ng-dirty':''"
required="" ng-minlength="8">
<span class="error ng-hide" ng-show="(f1.uPassword.$dirty || submitted)
&& f1.uPassword.$error.required" st_title="">Password required!
</span>
<span class="error ng-hide" ng-show="(f1.uPassword.$dirty || submitted)
&& f1.uPassword.$error.minlength" st_title="">Password must be 8
char long!</span>
</div>
</div>
<label for="uFullName" class="col-md-2 control-label">Gender :</label>
<input type="radio" ng-model="User.Gender" name="uGender" value="Male"
required="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required">
Male
<input type="radio" ng-model="User.Gender" name="uGender" value="Female"
required="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required">
Female
<span class="error ng-hide" ng-show="(f1.uGender.$dirty || submitted)
&& f1.uGender.$error.required" st_title="">Gender required!</span>
</div>
</div>
<div class="col-md-10 col-md-offset-2">
<input type="submit" value="Register" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
<div style="display: none">
<img src="./Part 6 - How to create simple registration form with validation using angularjs and
asp.net mvc4 - Dotnet Awesome_files/DemoImageHandler.ashx" alt="Part 6 - How to create simple
registration form with validation using angularjs and asp.net mvc4">
</div>
<div>
<div class="row" style="margin-top:10px;">
<div class="col-xs-12 col-sm-6"> <a class="btn btn-primary btn-block" id="VT" target=
"_blank" style="margin-bottom:6px;" href="https://www.youtube.com/watch?v=EwZFjvVDAkI"><span
-6-
class="glyphicon glyphicon-play" st_title=""></span>Video Tutorial</a></div>

<div class="col-xs-12 col-sm-6"> <a class="btn btn-warning btn-block" id="SBS" target=
"_blank" style="margin-bottom:6px;" href=
"http://dotnetawesome.blogspot.com/2015/01/how-to-create-simple-registration-form-with-valida
tion-using-angularjs-and-aspnet-mvc4.html"><span class="glyphicon glyphicon-book" st_title=
""></span>Step Wise Guidlines</a> </div>
</div>
<script type="text/javascript" src="./Part 6 - How to create simple registration form with
validation using angularjs and asp.net mvc4 - Dotnet Awesome_files/buttons.js"></script>
<script>
$(document).ready(function () {
$('span').attr('st_title', $('.DDSubHeader').text());
});
</script>
<form action="http://dotnetawesome.com/CodeViwer/CodeViwer" method="post" name="codeviwer">
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success btn-block" name="PageName" value=
"download application"><span class="glyphicon glyphicon-download-alt" st_title=
""></span>Download</button>
</div>
</div>
<div class="codeviwer">
<input id="ControllerName" name="ControllerName" type="hidden" value="Angular">
<input id="ActionName" name="ActionName" type="hidden" value="Part6">
<input id="retUrl" name="retUrl" type="hidden" value=
"/angularjs/how-to-create-simple-registration-form-with-validation-using-angularjs-an
d-aspnet-mvc4">
<input id="DemoID" name="DemoID" type="hidden" value="1058">
<input id="PageID" name="PageID" type="hidden" value="1209">
<style>
.nav.nav-tabs input{
color: #555;
cursor: pointer;
background-color: #fff;
border: medium none;
margin-right: 2px;
line-height: 1.42857143;
border-radius: 4px 4px 0 0;
position: relative;
display: block;
padding: 10px 15px;
color: #428bca;
text-decoration: none;
background: 0 0;
}
.nav.nav-tabs input:hover, .nav.nav-tabs input.active
{
border: medium none;
-7-
-webkit-box-shadow: inset 0 -2px 0 #2196f3;

box-shadow: inset 0 -2px 0 #2196f3;
color: #2196f3;
}
</style>
<script>
$("#VT").attr('href', 'https://www.youtube.com/watch?v=EwZFjvVDAkI');
$("#SBS").attr('href',
'http://dotnetawesome.blogspot.com/2015/01/how-to-create-simple-registration-form-with-va
lidation-using-angularjs-and-aspnet-mvc4.html');
});
</script>
</div>
</form><style>
pre { padding: 0 3px 2px; font-family: Monaco, Menlo, Consolas, "Courier New",
monospace; color: #333; display: block; padding: 9.5px; margin: 0 0 30px 0 !important;
font-size: 13px; line-height: 20px; word-break: break-all; word-wrap: break-word;
white-space: pre; white-space: pre-wrap; border: 1px solid #ccc; border: 1px solid rgba(0,
0, 0, 0.15); -webkit-border-radius: 4px; border-radius: 4px; }
pre.prettyprint { margin-bottom: 20px; }
.pre-scrollable{max-height:340px;overflow-y:scroll}
.prettyprint{padding:10px 15px;background-color:#FFF;border:1px solid #e1e1e8}
.prettyprint.linenums{-webkit-box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0
#ececf0;box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
ol.linenums{margin:0 0 0 -12px}
ol.linenums li{padding-left:12px;color:#bebec5;line-height:20px;list-style:decimal}
ol.linenums{margin:0!important}
pre.prettyprint li{background:none!important}
pre.prettyprint{padding:2px;border:1px solid #EDE7E7}
</style>
<link href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css" rel=
"stylesheet">
<script src="./Part 6 - How to create simple registration form with validation using angularjs
and asp.net mvc4 - Dotnet Awesome_files/prettify.js"></script>
<script>
$("[class*=brush]").addClass("prettyprint linenums");
prettyPrint();
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
-8-
angularjs and asp.net mvc4 - Dotnet Awesome_files/angular"></script>
<script src="./Part 6
angularjs and asp.net
<script src="./Part 6
angularjs and asp.net
- How to create simple registration form with validation using

mvc4 - Dotnet Awesome_files/MyApp.js"></script>
- How to create simple registration form with validation using
mvc4 - Dotnet Awesome_files/Part6Controller.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-52097401-1', 'dotnetawesome.com');
ga('send', 'pageview');
</script>
<script>
$('input[type="submit"][value="MyApp.js"]').addClass("active");
});
</script>
<script>
var $window = $(window);
function checkWidth() {
if ($window.width() >= 768) {
$('.navbar-collapse').removeClass('in').addClass('collapse');
}
}
checkWidth();
$(window).resize(checkWidth);
$('.navbar-nav a').on('click', function () {
if ($(window).width() < 768) {
$(".btn-navbar").click(); //bootstrap 2.x
$(".navbar-toggle").click() //bootstrap 3.x by Richard
}
});
});
</script>
<script>
var $new = '<span style="display: inline-block; position: relative; top: -7px;
left: 0px; font-size: 10px; color: red; font-weight: bold;">New!</span>';
$('.navbar-nav a[title="Project"]').append($new);
});
</script>
-9-
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'dotnetawesome'; // required: replace example with your forum
shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0
]).appendChild(s);
}());
</script>
<div id="stcpDiv" style="position: absolute; top: -1999px; left: -1988px;">ShareThis Copy and
Paste</div><iframe id="stSegmentFrame" name="stSegmentFrame" src="./Part 6 - How to create
simple registration form with validation using angularjs and asp.net mvc4 - Dotnet
Awesome_files/getSegment.html" frameborder="0" scrolling="no" width="0px" height="0px" style=
"display:none;"></iframe><div id="stwrapper" class="stwrapper stwrapper4x" style="display:
none;"><iframe allowtransparency="true" id="stLframe" class="stLframe" name="stLframe"
frameborder="0" scrolling="no" src="./Part 6 - How to create simple registration form with
validation using angularjs and asp.net mvc4 - Dotnet
Awesome_files/index.e43160cd60c381f0eb2d8f874bfbd8d1.html"></iframe></div><div id="stOverlay"
onclick="javascript:stWidget.closeWidget();"></div></body></html>
-10-

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Copyright:

Available Formats

You might also like

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Copyright:

Available Formats

C:\Users\Deutsch\Desktop\demoo\Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4 - Dotnet Awesome.

<div class="demoArea ng-scope" ng-app="MyApp">

&& f1.uUsername.$error.required" st_title="">Username required!

class="glyphicon glyphicon-play" st_title=""></span>Video Tutorial</a></div>

-webkit-box-shadow: inset 0 -2px 0 #2196f3;

- How to create simple registration form with validation using

You might also like

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Copyright:

Available Formats

You might also like

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Part 6 - How To Create Simple Registration Form With Validation Using Angularjs and ASP - Net Mvc4 - Dotnet Awesome

Uploaded by

Copyright:

Available Formats

C:\Users\Deutsch\Desktop\demoo\Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4 - Dotnet Awesome.

<div class="demoArea ng-scope" ng-app="MyApp">

&amp;&amp; f1.uUsername.$error.required" st_title="">Username required!

class="glyphicon glyphicon-play" st_title=""></span>Video Tutorial</a></div>

-webkit-box-shadow: inset 0 -2px 0 #2196f3;

- How to create simple registration form with validation using

You might also like

&& f1.uUsername.$error.required" st_title="">Username required!