AngularJS Example

HTML

<div ng-app="showApp" ng-controller="MainCtrl">
			<form 
				enctype="multipart/form-data" 
				name="brief_form_new" 
				id="brief_form_new_test" 
				action="brief-test/" 
				method="post" 
				novalidate="novalidate" 
				ng-controller="formController" 
				ng-submit="submit()">

			    <div class="textarea-box" style="width: 450px;margin-bottom: 30px;">
			        <textarea 
			        	type="text" 
			        	name="message_new" 
			        	rows="5" cols="50" 
			        	class="main_field" 
			        	placeholder="Я хочу... *" 
			        	style="width: 426px;" 
			        	title="Заполните поле" 
			        	ng-model="message_new" 
			        	required>
			        </textarea>

			        <div class="file-add">
			            <input 
			            	type="file" 
			            	size="1" 
			            	name="attachment" 
			            	value="" 
			            	id="fileUploadField" 
			   	        	ng-model="attachment" 
			   	        	check-file-size="" />

			   	        <div>	
				   	        <label class="error hide filesize_error" id="fileSizeError">Размер файла превышен.</label>
				   	        <label class="error hide fileformat_error" id="fileFormatError">Неверный формат файла.</label>
			   	        </div>
			        </div>
			    </div>

			    <div class="fio_cell">
			        <input 
			        	type="text" 
			        	name="name_new" 
			        	value="" 
			        	placeholder="ФИО *" 
			        	style="" 
			        	title="Заполните поле" 
			        	class="brief_name main_field" 
			        	ng-model="name_new" 
			        	required />

			        <label class="error" ng-show="brief_form_new.name_new.$dirty && brief_form_new.name_new.$invalid">Введите имя</label>
			    </div>

			    <div class="fio_cell">
			        <input 
			        	type="email" 
			        	name="email_new" 
			        	value="" 
			        	placeholder="E-mail *" 
			        	style="" 
			        	title="Заполните поле" 
			        	class="brief_email...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>

.hide{
	display: none;
}	


#brief_form_new_test{

}

	#brief_form_new_test textarea,
	#brief_form_new_test input{
		margin-bottom: 20px;
	}

	#brief_form_new_test textarea.ng-dirty.ng-valid,
	#brief_form_new_test input.ng-dirty.ng-valid,
	#brief_form_new_test textarea.ng-pristine,
	#brief_form_new_test input.ng-pristine{
		border: 2px solid #ccc;
	}

	#brief_form_new_test textarea.ng-dirty.ng-invalid,
	#brief_form_new_test input.ng-dirty.ng-invalid{
		border: 2px solid #f00;
	}

JavaScript

function formController($scope){
    $scope.submit=function(){
        alert(angular.toJson($scope.brief_form_new));
    }
}



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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('checkFileSize', function() {
  return {
    link: function(scope, elem, attr, ctrl) {
      function bindEvent(element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else {
          element.attachEvent('on' + type, handler);
        }
      }

      bindEvent(elem[0], 'change', function() {
        // check filesize
        if(this.files[0]){
	        if(this.files[0].size > 134217728){
	        	angular.element(document.querySelector('#fileSizeError')).css({
	        		'display': 'inline'
	        	});
	        }else{
	        	angular.element(document.querySelector('#fileSizeError')).css({
	        		'display': 'none'
	        	});
	        }

	        // check fileformat
			var	a = this.files[0].name.split('.'); 
			var ext = a[a.length-1]; 

	        if(ext == 'txt' || ext == 'pdf' || ext == 'doc' || ext == 'docx' || ext == 'jpg' || ext == 'png' || ext == 'jpeg' || ext == 'flac'){
	        	angular.element(document.querySelector('#fileFormatError')).css({
	        		'display': 'none'
	        	});
	        }else{
	        	angular.element(document.querySelector('#fileFormatError')).css({
	        		'display': 'inline'
	        	});
	        }
        }else{
        	angular.element(document.querySelector('#fileFormatError')).css({
        		'display': 'none'
        	});
        	angular.element(document.querySelector('#fileSizeError')).css({
        		'display': 'none'
        	});  
        }


      });
    }
  }
});