From c17f288e7a9f9d842c0a44727d296a0bf8bd523e Mon Sep 17 00:00:00 2001
From: Sven Slootweg <jamsoftgamedev@gmail.com>
Date: Sat, 5 Oct 2013 23:27:10 +0200
Subject: [PATCH] Mark invalid fields in the UI after form submission

---
 public_html/modules/nodes/create.php |  5 ++++-
 public_html/static/css/openng.css    |  5 +++++
 public_html/static/js/openng.js      | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/public_html/modules/nodes/create.php b/public_html/modules/nodes/create.php
index 3d682fc..6efcb38 100644
--- a/public_html/modules/nodes/create.php
+++ b/public_html/modules/nodes/create.php
@@ -24,10 +24,12 @@ elseif($router->uMethod == "post")
 {
 	/* Process form */
 	$sErrors = array();
+	$sErrorFields = array();
 	
 	if(empty($_POST['name']))
 	{
 		$sErrors[] = "You must enter a name for the new node. This name does not have to be unique.";
+		$sErrorFields[] = "name";
 	}
 	
 	if(empty($sErrors))
@@ -93,7 +95,8 @@ elseif($router->uMethod == "post")
 		
 		$sData = array(
 			"result"	=> "error",
-			"message"	=> "One or more form fields were not filled in correctly: <ul>{$sErrorList}</ul>"
+			"message"	=> "One or more form fields were not filled in correctly: <ul>{$sErrorList}</ul>",
+			"errorfields"	=> $sErrorFields
 		);
 	}
 }
diff --git a/public_html/static/css/openng.css b/public_html/static/css/openng.css
index e5e00ea..77abe3a 100644
--- a/public_html/static/css/openng.css
+++ b/public_html/static/css/openng.css
@@ -125,6 +125,11 @@ h1.form
 	margin-left: 1px;
 }
 
+.pure-form input.invalid, .pure-form textarea.invalid
+{
+	border-color: #B60202 !important;
+}
+
 div.label
 {
 	padding-top: 4px;
diff --git a/public_html/static/js/openng.js b/public_html/static/js/openng.js
index c7cf1ba..cced8fc 100644
--- a/public_html/static/js/openng.js
+++ b/public_html/static/js/openng.js
@@ -70,13 +70,14 @@ function hookSubmitEvent(form, callback, error)
 			
 			var formdata = element.serialize();
 			console.log(formdata);
+			
 			$.ajax({
 				type: method,
 				url: target,
 				data: formdata,
 				dataType: "json",
 				success: function(data, xhr){ console.log(data); callback(element, data, xhr); },
-				error: function(data, xhr, err){ error(element, data, xhr, err); }
+				error: function(data, xhr, err){ error(element, data, xhr, err); /* This handles HTTP errors, NOT application errors! */ }
 			});
 			
 			return false;
@@ -121,6 +122,18 @@ function callbackNodeCreated(form, data)
 	else if(data.result == "error")
 	{
 		form.find("button[type=submit] i").restoreIcon();
+		
+		form.find("input, textarea").removeClass("invalid");
+		
+		if(data.errorfields)
+		{
+			for(i in data.errorfields)
+			{
+				var field_name = data.errorfields[i];
+				form.find("input[name=" + field_name + "], textarea[name=" + field_name + "]").addClass("invalid");
+			}
+		}
+		
 		spawnError(data.message);
 	}
 }