Add validation (basic client & server side)

etemplate/inc/class.etemplate_new.inc.php

@@ -166,12 +166,27 @@ class etemplate_new
 		self::$response = egw_json_response::get();
 
 		// todo: validate content
-		// $content = self::validate($content);
+		$content = self::validate($content);
 
 		// merge with preserve and call our callback
 		return ExecMethod(self::$request->method, self::complete_array_merge(self::$request->preserv, $content));
 	}
 
+	/**
+	 * Validate the content
+	 *
+	 * ** Test stub! ** First field always fails.
+	 * @todo Fix this for proper server side validation
+	 */
+	static public function validate($content) {
+		self::$response->generic('et2_validation_error', array(
+			// Validation errors are field_name: message
+			key($content)=> "First field fails serverside. '".current($content)."'")
+		);
+
+		return $content;
+	}
+
 	/**
 	 * Path of template relative to EGW_SERVER_ROOT
 	 *

etemplate/js/et2_inputWidget.js

@@ -59,6 +59,19 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 		this._oldValue = "";
 	},
 
+	attachToDOM: function() {
+		this._super.apply(this,arguments);
+		
+		$j(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved
+		$j(this.getInputNode()).validator();
+	},
+	detatchFromDOM: function() {
+		if(this.getInputNode()) {
+			$j(this.getInputNode()).data("validator").destroy();
+		}
+		this._super.apply(this,arguments);
+	},
+
 	set_value: function(_value) {
 		this._oldValue = _value;
 
@@ -80,10 +93,12 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			if (_value != "")
 			{
 				node.setAttribute("id", _value);
+				node.setAttribute("name", _value);
 			}
 			else
 			{
 				node.removeAttribute("id");
+				node.removeAttribute("name");
 			}
 		}
 	},

etemplate/js/etemplate2.js

@@ -63,6 +63,7 @@ etemplate2.prototype.clear = function()
 {
 	if (this.widgetContainer != null)
 	{
+		$j(':input',this.DOMContainer).validator().data("validator").destroy();
 		this.widgetContainer.destroy();
 		this.widgetContainer = null;
 	}
@@ -149,6 +150,15 @@ etemplate2.prototype.load = function(_url, _data)
 
 etemplate2.prototype.submit = function()
 {
+	// Validator
+	var valid = true;
+	var inputs = $j(':input',this.DOMContainer).each(function() {
+		if(typeof $j(this).data("validator") == "undefined") return true;
+		valid = valid && $j(this).data("validator").checkValidity();
+		return true;
+	});
+	if(!valid) return false;
+
 	// Get the form values
 	var values = this.widgetContainer.getValues();
 
@@ -250,6 +260,9 @@ function etemplate2_handle_response(_type, _response)
 		}
 
 		throw("Error while parsing et2_load response");
+	} else if (_type == "et2_validation_error") {
+		// Display validation errors
+		$j(':input',this.DOMContainer).data("validator").invalidate(_response.data);
 	}
 
 	return false;

etemplate/js/test/test.css

@@ -214,3 +214,27 @@ button.et2_button:focus {
 }
 
 
+/**
+* Validation
+*/
+input[required] {
+	background-color: #ffffd0;
+}
+input.invalid {
+	border-style: dotted;
+	border-color: red;
+}
+.error {
+	-moz-border-radius: 0 4px 4px 0;
+	-moz-box-shadow: 0 0 6px #DDDDDD;
+	background-color: #FFFE36;
+	border: 1px solid #E1E16D;
+	color: #000000;
+	display: none;
+	font-size: 11px;
+	height: 15px;
+	padding: 4px 10px;
+}
+.error p {
+	margin: 0;
+}

etemplate/js/test/test_xml.html

@@ -29,6 +29,7 @@
 		<script src="../et2_tabs.js"></script>
 		<script src="../lib/tooltip.js"></script>
 		<script src="../../../phpgwapi/js/jsapi/jsapi.js"></script>
+		<script src="../../../phpgwapi/js/jquery/jquery.tools.min.js"></script>
 
 
 		<script src="et2_test_timesheet_edit.json"></script>