AngularJS Form Validation

Developer
Tushar Mehrotra
Size
2,896 Kb
Views
30,360
  1. AngularJS Form Validation Previews
  2. AngularJS Form Validation HTML Codes
  3. AngularJS Form Validation CSS Codes
  4. AngularJS Form Validation JS Codes

How do I make an angularjs form validation?

I made this form similar as codeacademy. The functionality of this form like validation & tab switching are done with angular js.. What is a angularjs form validation? How do you make a angularjs form validation? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.

AngularJS Form Validation Previews
IQ Test

AngularJS Form Validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Form Validation</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="myApp" ng-controller="myController as formCtrl">
<header> <div class="container-fluid text-center"> <a href="" ng-click="formCtrl.login();" class="btn btn-default">LOGIN</a> <a href="" ng-click="formCtrl.register();" class="btn btn-success">SIGN UP</a> </div>
</header>
<div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h2 class="animated fadeInUpBig">Learn to code interactively, for free</h2> <div class="form-wrapper"> <div id="login" ng-class="{'login-hide':formCtrl.loginHide}"> <h3 class="animated fadeInUpBig">LOG IN AND CONTINUE CODING.</h3> <form action="#" class="animated fadeInLeftBig" name="myform" novalidate> <div class="input"> <input type="text" name="fullname" ng-model="fullname" ng-required="true" Placeholder="Email or Username"/> </div> <div class="input"> <input type="password" name="password" ng-model="password" ng-required="true" placeholder="Password"/> </div> <div class="input"> <a href="" class="btn btn-success">LOGIN</a> </div> <p class="error" ng-show="myform.fullname.$invalid && myform.fullname.$touched"> Please, enter your name</p> <p class="error" ng-show="myform.password.$invalid && myform.password.$touched"> Please, enter your password</p> </form> </div> <div id="signup" ng-class="{'register-hide':formCtrl.registerHide}"> <h3 class="animated fadeInDownBig">SIGN UP AND START CODING IN SECONDS.</h3> <form action="#" class="animated fadeInLeftBig" novalidate name="myform1"> <div class="input"> <input type="email" ng-required="true" name="email" ng-model="email" Placeholder="Email"/> </div> <div class="input"> <input type="password" ng-required="true" name="password" ng-model="password1" placeholder="Password"/> </div> <div class="input"> <a href="" class="btn btn-success">SIGN UP</a> </div> <p class="error" ng-show="myform1.email.$invalid && myform.email.$touched"> Please, enter your name</p> <p class="error" ng-show="myform1.password1.$invalid && myform.password1.$touched"> Please, enter your password</p> </form> </div> </div> </div> </div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Form Validation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oxygen);
body{ background: #e9eaea;
}
header{ background: #fff; min-height: 50px;
}
.btn{ border-radius: 0; width: 150px; height: 36px; margin: 7px 10px;
}
.btn-default{ border: 1px solid #34b3a0; color: #34b3a0;
}
.btn-default:hover, .btn-default:active, .btn-default:focus{ background: transparent; border: 1px solid #34b3a0; color: #34b3a0; opacity: 0.7;
}
.btn-success{ background: #34b3a0;
}
.btn-success:hover, .btn-success:active, .btn-success:focus{ background: #34b3a0; opacity: 0.7;
}
h2{ color: #204056; font-family: "oxygen", sans-serif;
}
h3{ color: #959696; margin-bottom: 30px; font-size: 20px;
}
.form-wrapper{ width: 80%; margin: 30px auto;
}
#login, #signup{ margin-top: 50px;
}
form{ animation-delay: 0.7s;
}
input{ color: #959696;
}
input, .form-wrapper a.btn-success{ width: 350px; height: 46px; padding: 5px; font-size: 16px;
}
.form-wrapper a.btn-success{ padding: 10px; margin-top: 30px;
}
.login-hide, .register-hide{ display: none;
}
.error{ color: #FB3640;
}
input.ng-invalid.ng-touched{ border: 2px solid #FB3640;
}

AngularJS Form Validation - Script Codes JS Codes

angular.module("myApp", [])
.controller("myController", function(){ var formCtrl = this; formCtrl.loginHide = false; formCtrl.registerHide = true; formCtrl.login = function(){ formCtrl.registerHide = true; formCtrl.loginHide = false; }; formCtrl.register = function(){ formCtrl.registerHide = false; formCtrl.loginHide = true; };
});
AngularJS Form Validation - Script Codes
AngularJS Form Validation - Script Codes
Home Page Home
Developer Tushar Mehrotra
Username MTushar
Uploaded September 13, 2022
Rating 3
Size 2,896 Kb
Views 30,360
Do you need developer help for AngularJS Form Validation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Mehrotra (MTushar) Script Codes
Name
Random Programming Quote Generator
AngularJS Directives
Jquery datepicker
Less Color Functions
Codepen Pens
Portfolio
Subscribe Newsletter
Bootstrap alert
Form Email validation
Simple chatbot javascript
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!