Mark invalid fields in the UI after form submission

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
 		);
 	}
 }

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;

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);
 	}
 }