Permalink
Browse files

automatic form parsing

  • Loading branch information...
1 parent df7df66 commit c1d97026087f478257b176362aa70a20f7baaf8b @wilkerlucio committed Aug 25, 2010
Showing with 120 additions and 2 deletions.
  1. +26 −0 examples/auto_parse.html
  2. +28 −2 lib/jcheck.form.js
  3. +13 −0 spec/fixtures/form_inline_validations.html
  4. +30 −0 spec/unit/form_spec.js
  5. +23 −0 src/jcheck.form.coffee
View
@@ -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>
View
@@ -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);
@@ -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>
View
@@ -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
View
@@ -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)

0 comments on commit c1d9702

Please sign in to comment.