diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js
index 722c34d56..2e3653ad0 100644
--- a/js/controller/BoardController.js
+++ b/js/controller/BoardController.js
@@ -42,6 +42,38 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	$scope.board = BoardService.getCurrent();
 	$scope.uploader = FileService.uploader;
 
+	$scope.startTitleEdit = function(card) {
+		card.renameTitle = card.title;
+		card.status = card.status || {};
+		card.status.editCard = true;
+	};
+
+	$scope.finishTitleEdit = function(card) {
+		var newTitle;
+		if (!card.renameTitle || !card.renameTitle.trim()) {
+			newTitle = '';
+		} else {
+			newTitle = card.renameTitle.trim();
+		}
+
+		if (newTitle === card.title) {
+			// title unchanged
+			card.status.editCard = false;
+			delete card.renameTitle;
+		} else if (newTitle !== '') {
+			// title changed
+			card.title = newTitle;
+			CardService.update(card).then(function (data) {
+				card.status.editCard = false;
+				delete card.renameTitle;
+			});
+		} else {
+			// empty title
+			card.status.editCard = false;
+			delete card.renameTitle;
+		}
+	};
+
 	$scope.$watch(function() {
 		return $state.current;
 	}, function(currentState) {
@@ -189,15 +221,17 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	};
 
 	$scope.createCard = function (stack, title) {
-		var newCard = {
-			'title': title,
-			'stackId': stack,
-			'type': 'plain'
-		};
-		CardService.create(newCard).then(function (data) {
-			$scope.stackservice.addCard(data);
-			$scope.newCard.title = '';
-		});
+		if (this['addCardForm' + stack].$valid) {
+			var newCard = {
+				'title': title,
+				'stackId': stack,
+				'type': 'plain'
+			};
+			CardService.create(newCard).then(function (data) {
+				$scope.stackservice.addCard(data);
+				$scope.newCard.title = '';
+			});
+		}
 	};
 
 	$scope.stackDelete = function (stack) {
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index e7904054d..e738c4c68 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -4,20 +4,20 @@
  * @author Julius Härtl <jus@bitgrid.net>
  *
  * @license GNU AGPL version 3 or any later version
- *  
+ *
  *  This program is free software: you can redistribute it and/or modify
  *  it under the terms of the GNU Affero General Public License as
  *  published by the Free Software Foundation, either version 3 of the
  *  License, or (at your option) any later version.
- *  
+ *
  *  This program is distributed in the hope that it will be useful,
  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *  GNU Affero General Public License for more details.
- *  
+ *
  *  You should have received a copy of the GNU Affero General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *  
+ *
  */
 
 /* global app moment angular OC */
@@ -26,6 +26,7 @@ import app from '../app/App.js';
 app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $state, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
 	$scope.sidebar = $rootScope.sidebar;
 	$scope.status = {
+		renameTitle: '',
 		lastEdit: 0,
 		lastSave: Date.now()
 	};
@@ -89,9 +90,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	});
 
 	$scope.cardRenameShow = function () {
-		if ($scope.archived || !BoardService.canEdit())
-		{return false;}
-		else {
+		if ($scope.archived || !BoardService.canEdit()) {
+			return false;
+		} else {
+			$scope.status.renameTitle = CardService.getCurrent().title;
 			$scope.status.cardRename = true;
 		}
 	};
@@ -167,9 +169,27 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 
 	// handle rename to update information on the board as well
 	$scope.cardRename = function (card) {
-		CardService.rename(card).then(function (data) {
+		var newTitle;
+		if (!$scope.status.renameTitle || !$scope.status.renameTitle.trim()) {
+			newTitle = '';
+		} else {
+			newTitle = $scope.status.renameTitle.trim();
+		}
+
+		if (newTitle === card.title) {
+			// title unchanged
 			$scope.status.renameCard = false;
-		});
+		} else if (newTitle !== '') {
+			// title changed
+			card.title = newTitle;
+			CardService.rename(card).then(function (data) {
+				$scope.status.renameCard = false;
+			});
+		} else {
+			// empty title
+			$scope.status.renameTitle = card.title;
+			$scope.status.renameCard = false;
+		}
 	};
 	$scope.cardUpdate = function (card) {
 		CardService.update(card).then(function (data) {
@@ -220,7 +240,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		element.duedate = null;
 		CardService.update(element);
 	};
-	
+
 	/**
 	 * Show ui-select field when clicking the add button
 	 */
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index b7a124993..fb91b9a01 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -73,12 +73,16 @@
 							<h4>
 								<span class="editable-inline"
 									ng-show="!c.status.editCard"
-									ng-click="c.status.editCard=true">{{cardservice.get(c.id).title}}</span>
-
-								<form ng-if="c.status.editCard" ng-submit="cardservice.update(c); c.status.editCard=false">
-									<input class="input-inline" type="text" placeholder="<?php p($l->t('Add a new card')); ?>"
-										ng-blur="cardservice.update(c); c.status.editCard=false" ng-model="c.title"
-										autofocus-on-insert required maxlength="100" />
+									ng-click="startTitleEdit(c)">{{cardservice.get(c.id).title}}</span>
+								<form ng-if="c.status.editCard" ng-submit="finishTitleEdit(c)">
+									<input
+											class="input-inline"
+											type="text"
+											ng-blur="finishTitleEdit(c)"
+											ng-model="c.renameTitle"
+											autofocus-on-insert
+											required
+											maxlength="100">
 								</form>
 							</h4>
 							<ul class="labels compact-item" ng-if="!compactMode">
@@ -152,9 +156,12 @@
 			</ul>
 
 			<!-- CREATE CARD //-->
-			<div class="card create" ng-class="{emptyStack: !s.cards.length}"
-				 ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && params.filter!=='archive'">
-				<form ng-submit="createCard(s.id, newCard.title)">
+			<div
+					class="card create"
+					ng-class="{emptyStack: !s.cards.length}"
+				 	ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}"
+					ng-if="boardservice.canEdit() && checkCanEdit() && params.filter !== 'archive'">
+				<form name="addCardForm{{ s.id }}" ng-submit="createCard(s.id, newCard.title)">
 					<h4 ng-if="status.addCard[s.id]">
 						<input type="text" autofocus-on-insert
 							   ng-model="newCard.title"
diff --git a/templates/part.card.php b/templates/part.card.php
index 6358b72ad..2e690139f 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -15,7 +15,7 @@
 		<!-- TODO: change to textarea elastic //-->
 		<form ng-submit="cardRename(cardservice.getCurrent())">
 			<input class="input-inline" type="text" ng-if="status.cardRename"
-				   ng-model="cardservice.getCurrent().title"
+				   ng-model="status.renameTitle"
 				   ng-blur="cardRename(cardservice.getCurrent())"
 				   autofocus-on-insert required maxlength="100">
 		</form>