Added support for HMTL5 elements: email, url, number... They are proc…

…essed just like text fields

jquery.formality.js

@@ -198,12 +198,17 @@ $.fn.extend(
     			return item.is(type);
     		}
     	};
-
+    	    	
     	return {
             objectFromValues: function(inputs) {
                 var object = {};
 
-                reduce(inputs.filter(is(':text')), textsAndRadios, object);
+				var textTypes = ['text', 'email', 'url', 'tel', 'number', 'range', 'date', 'datetime', 'search'];
+		    	var reduceTextFields = function(type) {
+					reduce(inputs.filter(is('input[type=' + type + ']')), textsAndRadios, object);
+		    	};
+    			textTypes.forEach(reduceTextFields);
+
                 reduce(inputs.filter(is(':radio:checked')), textsAndRadios, object);
                 reduce(inputs.filter(is('select')), selects, object);
 

tests/run-all-tests.html

@@ -16,6 +16,7 @@
   <!-- Tests -->
   <script type="text/javascript" src="test.inputs.js"></script>
   <script type="text/javascript" src="test.textfields.js"></script>
+  <script type="text/javascript" src="test.html5fields.js"></script>
   <script type="text/javascript" src="test.radios.js"></script>
   <script type="text/javascript" src="test.selects.js"></script>
   <script type="text/javascript" src="test.checkboxes.js"></script>

tests/test.html5fields.js

@@ -0,0 +1,85 @@
+
+describe('html5 inputs', function() {
+
+  it('can read an email field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="email" name="foo" value="bob@test.com" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: 'bob@test.com' });
+  });
+
+  it('can read a URL field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="url" name="foo" value="http://www.google.com/foobar" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: 'http://www.google.com/foobar' });
+  });
+
+  it('can read a telephone field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="tel" name="foo" value="0123456789" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: '0123456789' });
+  });
+
+  it('can read a numeric field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="number" name="foo" value="123" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: '123' });
+  });
+
+  it('can read a range field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="range" name="foo" value="20" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: '20' });
+  });
+
+  it('can read a date field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="date" name="foo" value="30/12/2010" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: '30/12/2010' });
+  });  
+
+  it('can read a datetime field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="datetime" name="foo" value="30/12/2010 09:28pm" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: '30/12/2010 09:28pm' });
+  });  
+
+  it('can read a search field', function() {
+    var fixture = $(
+      '<form>' +
+        '<input type="search" name="foo" value="keyword" />' +
+      '</form>'
+      );
+    var form = fixture.formality();
+    expect(form).toEqual({ foo: 'keyword' });
+  });  
+
+});
+

tests/test.inputs.js

@@ -4,9 +4,9 @@ describe('inputs', function() {
   it('uses the input names, or the ID if they have no name', function() {
     var fixture = $(
       '<form>' + 
-        '<input name="fooName" />' + 
-        '<input id="barId" />' +
-        '<input name="fizzName" id="fizzId" />' +
+        '<input type="text" name="fooName" />' + 
+        '<input type="text" id="barId" />' +
+        '<input type="text" name="fizzName" id="fizzId" />' +
       '</form>'
     );
     var form = fixture.formality();
@@ -17,4 +17,3 @@ describe('inputs', function() {
   });
 
 });
-

tests/test.textfields.js

@@ -5,8 +5,8 @@ describe('text inputs', function() {
   it('uses the text input values as the object values', function() {
     var fixture = $(
       '<form>' +
-        '<input name="foo" value="one" />' +
-        '<input name="bar" value="two" />' +
+        '<input type="text" name="foo" value="one" />' +
+        '<input type="text" name="bar" value="two" />' +
       '</form>'
       );
     var form = fixture.formality();
@@ -19,7 +19,7 @@ describe('text inputs', function() {
   it('considers text inputs with no values as empty strings', function() {
     var fixture = $(
       '<form>' +
-        '<input name="foo" />' +
+        '<input type="text" name="foo" />' +
       '</form>'
       );
     var form = fixture.formality();
@@ -31,7 +31,7 @@ describe('text inputs', function() {
   it('can handle text fields with quotes and double quotes in the value', function() {
     var fixture = $(
       '<form>' +
-        '<input name="foo" />' +
+        '<input type="text" name="foo" />' +
       '</form>'
       );
     fixture.find('input').val('\'Hello\' \"bob\"');