JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<body ng-app="myApp">	
    <div ng-controller="LoginCtrl">
<form class="form-horizontal" role="form" id="form" method="post" name = "userForm"
		   novalidate ng-submit = "chkLogin($event)"> 		
<div class="form">
				<div class="input_label">Username :</div>
				<div class="input_value">
					<input type="email" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" ng-blur="blur('username')"     ng-required="true">
					<div  id="usernameError" class="input_error">{{usernameError}}</div>
				</div>
				
				
				<div class="clear_both"></div>
			</div>
			<div class="form">
				<div class="input_label">Password :</div>
				<div class="input_value">
					<input type="password" name="password" id="password"  ng-model="password" class="form-control"  placeholder="Password"   ng-blur="blur('password')" ng-required="true" >
					<div class="input_error" id="passwordError">{{passwordError}}</div>
					<div id="error" class="error">
						
					</div>
				</div>
				
				<div class="clear_both"></div>
			</div>	
                        <button class="btn green" id="btn" name="btn">Login</button>
                        </form>   
               </div>
               </body>

JavaScript

var app=angular.module('myApp', []);



// create angular controller
app.controller('LoginCtrl', function($scope) {
	
	// function to submit the form after all validation has occurred			
	$scope.blur = function(field) {
		console.log('blur called')

		console.log($scope)
		$scope[field+"Error"] = "";
		
		if($scope.userForm[field].$error.required) {
			$scope[field+"Error"]="This information is required.";
			$scope.error = 1;
		} 
		if($scope.userForm[field].$error.email) {
			$scope[field+"Error"]="Please enter a valid email address.";
			$scope.error = 1;
		} 
		console.log($scope.username);
		
	}


	
	$scope.chkLogin = function($event) {
		
		$scope.error = 0;
		document.getElementById('error').innerHTML="";
		$scope.blur("username");
		$scope.blur("password");
		console.log("scoperr",$scope.error)
		if($scope.error) {
			$event.preventDefault();
			return false;
			
		} 

	}
	
});