automatic form parsing

wilkerlucio · Aug 25, 2010 · c1d9702 · c1d9702
1 parent df7df66
commit c1d9702
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 2 deletions.
diff --git a/examples/auto_parse.html b/examples/auto_parse.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>jCheck</title>
+		<link rel="stylesheet" type="text/css" href="../css/jcheck.css" />
+		<script type="text/javascript" src="../vendor/jquery.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.core-extensions.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.form.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.errors.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.notifiers.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.validations.js"></script>
+		<script type="text/javascript" src="../lib/jcheck.i18n.js"></script>
+		<script type="text/javascript" src="../lib/locales/jcheck.en.js"></script>
+	</head>
+	<body>
+		<h2>Post your comment</h2>
+		<form action="" method="post" class="simple_form comment" data-jcheck="true">
+			<div class="input string required">
+				<label class="string required" for="comment_username">Your name</label>
+				<input class="string required" id="comment_username" maxlength="255" name="comment[username]" size="50" type="text" data-validations="presence: true" />
+			</div>
+			<button type="submit">Send</button>
+		</form>
+	</body>
+</html>
diff --git a/lib/jcheck.form.js b/lib/jcheck.form.js
@@ -9,15 +9,38 @@ var __bind = function(func, context) {
       field_prefix: null,
       notifiers: $.FormCheck.default_notifiers,
       live_notifiers: $.FormCheck.default_live_notifiers,
-      language: $.FormCheck.default_locale
+      language: $.FormCheck.default_locale,
+      auto_parse: true
     }, options || {});
     this.field_cache = {};
     this.errors = new $.FormCheck.Errors(this);
     this.validations = [];
     this.hook_events();
     this.setup_notifiers();
+    if (this.options.auto_parse) {
+      this.parse_inline_validations();
+    }
     return this;
   };
+  $.FormCheck.prototype.parse_inline_validations = function() {
+    return this.form.find(":input[data-validations]").each(__bind(function(index, element) {
+      var e, field_name, validations;
+      e = $(element);
+      field_name = this.parse_field_name(e);
+      validations = this.parse_validation_string(e.attr("data-validations"));
+      return this.validates(field_name, validations);
+    }, this));
+  };
+  $.FormCheck.prototype.parse_validation_string = function(validation_string) {
+    var validations;
+    validations = {};
+    try {
+      validations = eval(("({" + (validation_string) + "})"));
+    } catch (e) {
+      console.error(("can't parse \"" + (validation_string) + "\""));
+    }
+    return validations;
+  };
   $.FormCheck.prototype.hook_events = function() {
     var self;
     this.form.submit(__bind(function(e) {
@@ -242,7 +265,10 @@ var __bind = function(func, context) {
     label_element = this.form_checker.form.find(("label[for='" + (field_id) + "']"));
     return label_element.length > 0 ? label_element.text() : this.field_name;
   };
-  return ($.fn.jcheck = function(options) {
+  $.fn.jcheck = function(options) {
     return new $.FormCheck($(this), options || {});
+  };
+  return $(function() {
+    return $("form[data-jcheck=true]").jcheck();
   });
 })(jQuery);
diff --git a/spec/fixtures/form_inline_validations.html b/spec/fixtures/form_inline_validations.html
@@ -0,0 +1,13 @@
+<form action="" method="">
+	<div>
+		<label for="text">TextField</label>
+		<input type="text" name="text" id="text" data-validations="presence: true" />
+	</div>
+	<div>
+		<label for="email">Email</label>
+		<input type="text" name="email" id="email" data-validations="presence: true, format: {'with': 'email'}" />
+	</div>
+	<div>
+		<button type="submit">Send</button>
+	</div>
+</form>
diff --git a/spec/unit/form_spec.js b/spec/unit/form_spec.js
@@ -153,6 +153,36 @@ describe "jCheck"
 					v.field("multiple_select").value().should.eql ["2", "4", "5"]
 				end
 			end
+
+			describe "auto-parse"
+				describe "parsing validation strings"
+					it "should create the object with validations"
+						v = $("<form></form>").jcheck()
+						v.parse_validation_string("presence: true, format: /\\d+/").should.eql {presence: true, format: /\d+/}
+					end
+
+					it "should return log error and return blank object if string is valid"
+						stub(console, 'error')
+						v = $("<form></form>").jcheck()
+						console.should.receive('error').with_args(an_instance_of(String))
+						v.parse_validation_string("presence: namaste").should.eql {}
+					end
+				end
+
+				it "should parse fields with data-validation attribute"
+					v = $(fixture("form_inline_validations")).jcheck()
+
+					v.should.have_error_message_on("can't be blank", "text")
+					v.should.have_error_message_on("can't be blank", "email")
+					v.should.have_error_message_on("is invalid", "email")
+				end
+
+				it "should not parse fields if auto_parse option is sent as false"
+					v = $(fixture("form_inline_validations")).jcheck({auto_parse: false})
+					v.is_valid()
+					v.errors.size().should.be 0
+				end
+			end
 		end
 	end
 end
diff --git a/src/jcheck.form.coffee b/src/jcheck.form.coffee
@@ -22,13 +22,32 @@
 				notifiers: $.FormCheck.default_notifiers
 				live_notifiers: $.FormCheck.default_live_notifiers
 				language: $.FormCheck.default_locale
+				auto_parse: true
 			}, options || {})
 
 			@field_cache = {}
 			@errors = new $.FormCheck.Errors(this)
 			@validations = []
 			@hook_events()
 			@setup_notifiers()
+			@parse_inline_validations() if @options.auto_parse
+
+		parse_inline_validations: ->
+			@form.find(":input[data-validations]").each (index, element) =>
+				e = $(element)
+				field_name = @parse_field_name(e)
+				validations = @parse_validation_string(e.attr("data-validations"))
+				@validates(field_name, validations)
+
+		parse_validation_string: (validation_string) ->
+			validations = {}
+
+			try
+				validations = eval("({#{validation_string}})")
+			catch e
+				console.error("can't parse \"#{validation_string}\"")
+
+			validations
 
 		hook_events: ->
 			@form.submit (e) =>
@@ -209,4 +228,8 @@
 	# jquery hook
 	$.fn.jcheck = (options) ->
 		new $.FormCheck($(this), options || {})
+
+	# auto_parse
+	$ ->
+		$("form[data-jcheck=true]").jcheck()
 )(jQuery)