Skip to content
Browse files

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

…essed just like text fields
  • Loading branch information...
1 parent 2ad8fa8 commit 00930269837eed5eea81b523af445d95b17452a1 Romain Prieto committed Jul 25, 2011
Showing with 100 additions and 10 deletions.
  1. +7 −2 jquery.formality.js
  2. +1 −0 tests/run-all-tests.html
  3. +85 −0 tests/test.html5fields.js
  4. +3 −4 tests/test.inputs.js
  5. +4 −4 tests/test.textfields.js
View
9 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);
View
1 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>
View
85 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' });
+ });
+
+});
+
View
7 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() {
});
});
-
View
8 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\"');

0 comments on commit 0093026

Please sign in to comment.
Something went wrong with that request. Please try again.