active_form 0.0.1

data/samples/html/js/validation.js

@@ -0,0 +1,228 @@
+/*
+ * Really easy field validation with Prototype
+ * http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype
+ * Andrew Tetlaw
+ * Version 1.5.3 (2006-07-15)
+ * 
+ * Copyright (c) 2006 Andrew Tetlaw
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+Validator = Class.create();
+
+Validator.prototype = {
+	initialize : function(className, error, test, options) {
+		this.options = Object.extend({}, options || {});
+		this._test = test ? test : function(v,elm){ return true };
+		this.error = error ? error : 'Validation failed.';
+		this.className = className;
+	},
+	test : function(v, elm) {
+		return this._test(v,elm);
+	}
+}
+
+var Validation = Class.create();
+
+Validation.prototype = {
+	initialize : function(form, options){
+		this.options = Object.extend({
+			onSubmit : true,
+			stopOnFirst : false,
+			immediate : false,
+			focusOnError : true,
+			useTitles : false,
+			onFormValidate : function(result, form) {},
+			onElementValidate : function(result, elm) {}
+		}, options || {});
+		this.form = $(form);
+		if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
+		if(this.options.immediate) {
+			var useTitles = this.options.useTitles;
+			var callback = this.options.onElementValidate;
+			Form.getElements(this.form).each(function(input) { // Thanks Mike!
+				Event.observe(input, 'blur', function(ev) { Validation.validate(Event.element(ev),{useTitle : useTitles, onElementValidate : callback}); });
+			});
+		}
+	},
+	onSubmit :  function(ev){
+		if(!this.validate()) Event.stop(ev);
+	},
+	validate : function() {
+		var result = false;
+		var useTitles = this.options.useTitles;
+		var callback = this.options.onElementValidate;
+		if(this.options.stopOnFirst) {
+			result = Form.getElements(this.form).all(function(elm) { return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback}); });
+		} else {
+			result = Form.getElements(this.form).collect(function(elm) { return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback}); }).all();
+		}
+		if(!result && this.options.focusOnError) {
+			Form.getElements(this.form).findAll(function(elm){return $(elm).hasClassName('validation-failed')}).first().focus()
+		}
+		this.options.onFormValidate(result, this.form);
+		return result;
+	},
+	reset : function() {
+		Form.getElements(this.form).each(Validation.reset);
+	}
+}
+
+Object.extend(Validation, {
+	validate : function(elm, options){
+		options = Object.extend({
+			useTitle : false,
+			onElementValidate : function(result, elm) {}
+		}, options || {});
+		elm = $(elm);
+		var cn = elm.classNames();
+		return result = cn.all(function(value) {
+			var test = Validation.test(value,elm,options.useTitle);
+			options.onElementValidate(test, elm);
+			return test;
+		});
+	},
+	test : function(name, elm, useTitle) {
+		var v = Validation.get(name);
+		var prop = '__advice'+name.camelize();
+		if(Validation.isVisible(elm) && !v.test($F(elm), elm)) {
+			if(!elm[prop]) {
+				var advice = Validation.getAdvice(name, elm);
+				if(typeof advice == 'undefined') {
+					var errorMsg = useTitle ? ((elm && elm.title) ? elm.title : v.error) : v.error;
+					advice = '<div class="validation-advice" id="advice-' + name + '-' + Validation.getElmID(elm) +'" style="display:none">' + errorMsg + '</div>'
+					switch (elm.type.toLowerCase()) {
+						case 'checkbox':
+						case 'radio':
+							var p = elm.parentNode;
+							if(p) {
+								new Insertion.Bottom(p, advice);
+							} else {
+								new Insertion.After(elm, advice);
+							}
+							break;
+						default:
+							new Insertion.After(elm, advice);
+				    }
+					advice = $('advice-' + name + '-' + Validation.getElmID(elm));
+				}
+				if(typeof Effect == 'undefined') {
+					advice.style.display = 'block';
+				} else {
+					new Effect.Appear(advice, {duration : 1 });
+				}
+			}
+			elm[prop] = true;
+			elm.removeClassName('validation-passed');
+			elm.addClassName('validation-failed');
+			return false;
+		} else {
+			var advice = Validation.getAdvice(name, elm);
+			if(typeof advice != 'undefined') advice.hide();
+			elm[prop] = '';
+			elm.removeClassName('validation-failed');
+			elm.addClassName('validation-passed');
+			return true;
+		}
+	},
+	isVisible : function(elm) {
+		while(elm.tagName != 'BODY') {
+			if(!$(elm).visible()) return false;
+			elm = elm.parentNode;
+		}
+		return true;
+	},
+	getAdvice : function(name, elm) {
+		return Try.these(
+			function(){ return $('advice-' + name + '-' + Validation.getElmID(elm)) },
+			function(){ return $('advice-' + Validation.getElmID(elm)) }
+		);
+	},
+	getElmID : function(elm) {
+		return elm.id ? elm.id : elm.name;
+	},
+	reset : function(elm) {
+		elm = $(elm);
+		var cn = elm.classNames();
+		cn.each(function(value) {
+			var prop = '__advice'+value.camelize();
+			if(elm[prop]) {
+				var advice = Validation.getAdvice(value, elm);
+				advice.hide();
+				elm[prop] = '';
+			}
+			elm.removeClassName('validation-failed');
+			elm.removeClassName('validation-passed');
+		});
+	},
+	add : function(className, error, test, options) {
+		var nv = {};
+		nv[className] = new Validator(className, error, test, options);
+		Object.extend(Validation.methods, nv);
+	},
+	addAllThese : function(validators) {
+		var nv = {};
+		$A(validators).each(function(value) {
+				nv[value[0]] = new Validator(value[0], value[1], value[2], (value.length > 3 ? value[3] : {}));
+			});
+		Object.extend(Validation.methods, nv);
+	},
+	get : function(name) {
+		return  Validation.methods[name] ? Validation.methods[name] : new Validator();
+	},
+	methods : {}
+});
+
+Validation.add('IsEmpty', '', function(v) {
+				return  ((v == null) || (v.length == 0)); // || /^\s+$/.test(v));
+			});
+
+Validation.addAllThese([
+	['required', 'This is a required field.', function(v) {
+				return !Validation.get('IsEmpty').test(v);
+			}],
+	['validate-number', 'Please enter a valid number in this field.', function(v) {
+				return Validation.get('IsEmpty').test(v) || (!isNaN(v) && !/^\s+$/.test(v));
+			}],
+	['validate-digits', 'Please use numbers only in this field. please avoid spaces or other characters such as dots or commas.', function(v) {
+				return Validation.get('IsEmpty').test(v) || !/[^\d]/.test(v);
+			}],
+	['validate-alpha', 'Please use letters only (a-z) in this field.', function (v) {
+				return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v)
+			}],
+	['validate-alphanum', 'Please use only letters (a-z) or numbers (0-9) only in this field. No spaces or other characters are allowed.', function(v) {
+				return Validation.get('IsEmpty').test(v) || /^[a-zA-Z0-9]+$/.test(v)
+			}],
+	['validate-date', 'Please enter a valid date.', function(v) {
+				var test = new Date(v);
+				return Validation.get('IsEmpty').test(v) || !isNaN(test);
+			}],
+	['validate-email', 'Please enter a valid email address. For example fred@domain.com.', function (v) {
+				return Validation.get('IsEmpty').test(v) || /\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(v)
+			}],
+	['validate-url', 'Please enter a valid URL.', function (v) {
+				return Validation.get('IsEmpty').test(v) || /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(v)
+			}],
+	['validate-date-au', 'Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006.', function(v) {
+				if(Validation.get('IsEmpty').test(v)) return true;
+				var regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+				if(!regex.test(v)) return false;
+				var d = new Date(v.replace(regex, '$2/$1/$3'));
+				return ( parseInt(RegExp.$2, 10) == (1+d.getMonth()) ) && 
+							(parseInt(RegExp.$1, 10) == d.getDate()) && 
+							(parseInt(RegExp.$3, 10) == d.getFullYear() );
+			}],
+	['validate-currency-dollar', 'Please enter a valid $ amount. For example $100.00 .', function(v) {
+				// [$]1[##][,###]+[.##]
+				// [$]1###+[.##]
+				// [$]0.##
+				// [$].##
+				return Validation.get('IsEmpty').test(v) ||  /^\$?\-?([1-9]{1}[0-9]{0,2}(\,[0-9]{3})*(\.[0-9]{0,2})?|[1-9]{1}\d*(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(v)
+			}],
+	['validate-one-required', 'Please select one of the above options.', function (v,elm) {
+				var p = elm.parentNode;
+				var options = p.getElementsByTagName('INPUT');
+				return $A(options).any(function(elm) {
+					return $F(elm);
+				});
+			}]
+]);

data/samples/html/plain_view.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<title>Plain View Sample</title>	
+	<script src="js/prototype.js" type="text/javascript"></script>
+	<script src="js/effects.js" type="text/javascript"></script>
+	<script src="js/validation.js" type="text/javascript" ></script>
+	<style type="text/css" media="screen">
+		label { display: block };
+		.elem_text input, .elem_password input { display: block; }
+	</style>		
+</head>
+<body>
+	<div id="container">
+		<form action="#my_form" class="active_form" id="my_form" method="post">
+  <h3>Plain View Sample</h3>
+  <div class="section">
+    <h4 class="section" id="section-my_form_person-title">Your details</h4>
+    <div id="section-my_form_person">
+      <div class="elem_text required" id="elem_my_form_person_first_name">
+        <label class="required" for="my_form_person_first_name">First Name</label>
+        <input class="required" id="my_form_person_first_name" name="my_form[person][first_name]" size="30" type="text"/>
+      </div>
+      <div class="elem_text required" id="elem_my_form_person_last_name">
+        <label class="required" for="my_form_person_last_name">Last Name</label>
+        <input class="required" id="my_form_person_last_name" name="my_form[person][last_name]" size="30" type="text"/>
+      </div>
+      <div class="elem_password required" id="elem_my_form_person_password">
+        <label class="required" for="my_form_person_password">Password</label>
+        <input class="required" id="my_form_person_password" name="my_form[person][password]" size="30" type="password"/>
+      </div>
+      <div class="elem_password required" id="elem_my_form_person_password_confirm">
+        <label class="required" for="my_form_person_password_confirm">Password Confirm</label>
+        <input class="required" id="my_form_person_password_confirm" name="my_form[person][password_confirm]" size="30" type="password"/>
+      </div>
+      <div class="elem_select" id="elem_my_form_person_country">
+        <label for="my_form_person_country">Country</label>
+        <select class="elem_select" id="my_form_person_country" name="my_form[person][country]">
+          <option value="nl">Nederland</option>
+          <option value="be">België</option>
+        </select>
+      </div>
+      <div class="elem_submit" id="elem_my_form_person_submit">
+        <input class="elem_submit" id="my_form_person_submit" name="my_form[person][submit]" type="submit" value="Send"/>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <h4 class="section" id="section-my_form_message-title">Your message</h4>
+    <div id="section-my_form_message">
+      <div class="elem_text required" id="elem_my_form_message_subject">
+        <label class="required" for="my_form_message_subject">Subject</label>
+        <input class="required" id="my_form_message_subject" name="my_form[message][subject]" size="30" type="text"/>
+      </div>
+      <div class="elem_textarea required" id="elem_my_form_message_message">
+        <label class="required" for="my_form_message_message">Message</label>
+        <textarea class="required" cols="10" id="my_form_message_message" name="my_form[message][message]" rows="5"></textarea>
+      </div>
+      <div class="elem_submit" id="elem_my_form_message_submit">
+        <input class="elem_submit" id="my_form_message_submit" name="my_form[message][submit]" type="submit" value="Send"/>
+      </div>
+    </div>
+  </div>
+<script type="text/javascript" charset="utf-8">//<![CDATA[
+var fform_my_form=$('my_form');if(fform_my_form){
+  new Validation(fform_my_form, {stopOnFirst:false, useTitles:true});
+}
+//]]>
+</script>
+</form>
+
+	</div>
+</body>
+</html>

data/samples/html/sample001.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<title>Sample 001</title>	
+	<script src="js/prototype.js" type="text/javascript"></script>
+	<script src="js/effects.js" type="text/javascript"></script>
+	<script src="js/validation.js" type="text/javascript" ></script>
+	<link rel="stylesheet" type="text/css" href="css/style.css" />		
+</head>
+<body>
+	<div id="container">
+		<form action="#myform" class="active_form" id="myform" method="post">
+  <table>
+    <thead>
+      <tr>
+        <th colspan="2">Myform</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="header">
+        <td colspan="2">
+          <h3 onclick="$('section-myform_person').toggle()">
+            <span class="label">Your details</span>
+          </h3>
+        </td>
+      </tr>
+      <tr class="advice">
+        <td colspan="2">
+<div class="validation-advice advice-required" id="advice-required-myform_person_first_name" style="display: none">First Name: can't be blank</div>
+<div class="validation-advice advice-required" id="advice-required-myform_person_last_name" style="display: none">Last Name: can't be blank</div>
+<div class="validation-advice advice-required" id="advice-required-myform_person_password" style="display: none">Password: can't be blank</div>
+<div class="validation-advice advice-required" id="advice-required-myform_person_password_confirm" style="display: none">Password Confirm: can't be blank</div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div id="section-myform_person">
+            <table style="background: lightblue;">
+              <tr class="label">
+                <td colspan="2">
+                  <label class="required" for="myform_person_first_name">First Name</label>
+                </td>
+              </tr>
+              <tr class="elem_text required" id="elem_myform_person_first_name">
+                <td class="elem" colspan="2">
+                  <input class="required" id="myform_person_first_name" name="myform[person][first_name]" type="text"/>
+                </td>
+              </tr>
+              <tr class="label">
+                <td colspan="2">
+                  <label class="required" for="myform_person_last_name">Last Name</label>
+                </td>
+              </tr>
+              <tr class="elem_text required" id="elem_myform_person_last_name">
+                <td class="elem" colspan="2">
+                  <input class="required" id="myform_person_last_name" name="myform[person][last_name]" type="text"/>
+                </td>
+              </tr>
+              <tr class="label">
+                <td colspan="2">
+                  <label class="required" for="myform_person_password">Password</label>
+                </td>
+              </tr>
+              <tr class="elem_password required" id="elem_myform_person_password">
+                <td class="elem" colspan="2">
+                  <input class="required" id="myform_person_password" name="myform[person][password]" type="password"/>
+                </td>
+              </tr>
+              <tr class="label">
+                <td colspan="2">
+                  <label class="required" for="myform_person_password_confirm">Password Confirm</label>
+                </td>
+              </tr>
+              <tr class="elem_password required" id="elem_myform_person_password_confirm">
+                <td class="elem" colspan="2">
+                  <input class="required" id="myform_person_password_confirm" name="myform[person][password_confirm]" type="password"/>
+                </td>
+              </tr>
+              <tr id="elem-myform_person_country">
+                <td class="label">
+                  <label for="myform_person_country">Country</label>
+                </td>
+                <td class="elem_select">
+                  <select class="elem_select" id="myform_person_country" name="myform[person][country]">
+                    <option value="nl">Nederland</option>
+                    <option value="be">België</option>
+                  </select>
+                </td>
+              </tr>
+              <tr id="elem-myform_person_submit">
+                <td class="elem_submit" colspan="2">
+                  <input class="elem_submit" id="myform_person_submit" name="myform[person][submit]" type="submit" value="Send"/>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </td>
+      </tr>
+      <tr class="header">
+        <td colspan="2">
+          <h3 onclick="$('section-myform_message').toggle()">
+            <span class="label">Your message</span>
+          </h3>
+        </td>
+      </tr>
+      <tr class="advice">
+        <td colspan="2">
+<div class="validation-advice advice-required" id="advice-required-myform_message_subject" style="display: none">Subject: can't be blank</div>
+<div class="validation-advice advice-required" id="advice-required-myform_message_message" style="display: none">Message: can't be blank</div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div id="section-myform_message">
+            <table style="background: lightblue;">
+              <tr id="elem-myform_message_subject">
+                <td class="label">
+                  <label class="required" for="myform_message_subject">Subject</label>
+                </td>
+                <td class="elem_text required">
+                  <input class="required" id="myform_message_subject" name="myform[message][subject]" type="text"/>
+                </td>
+              </tr>
+              <tr class="label">
+                <td colspan="2">
+                  <label class="required" for="myform_message_message">Message</label>
+                </td>
+              </tr>
+              <tr class="elem_textarea required" id="elem_myform_message_message">
+                <td class="elem" colspan="2">
+                  <textarea class="required" cols="10" id="myform_message_message" name="myform[message][message]" rows="5"></textarea>
+                </td>
+              </tr>
+              <tr id="elem-myform_message_submit">
+                <td class="elem_submit" colspan="2">
+                  <input class="elem_submit" id="myform_message_submit" name="myform[message][submit]" type="submit" value="Send"/>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+<script type="text/javascript" charset="utf-8">//<![CDATA[
+var fform_myform=$('myform');if(fform_myform){
+  new Validation(fform_myform, {stopOnFirst:false, useTitles:true});
+}
+//]]>
+</script>
+</form>
+
+	</div>
+</body>
+</html>