Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 565e696b46
Fetching contributors…

Cannot retrieve contributors at this time

156 lines (130 sloc) 6.168 kB
<!--
TESTS FOR DEVELOPMENT
These use the individual source files. Use this while developing
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="lib/qunit.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/jquery-ui/flick/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" />
<!-- TEST LIB FILES -->
<script type="text/javascript" src="lib/qunit.js"></script>
<script type="text/javascript" src="lib/sinon.js"></script>
<!-- SRC LIB FILES -->
<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>
<script src="lib/underscore-1.3.3.min.js"></script>
<script src="lib/backbone-0.9.2.min.js"></script>
<script src="lib/backbone-deep-model.js"></script>
<script src="lib/handlebars-1.0.0.beta.6.js"></script>
<!-- SOURCE FILES -->
<script src="../src/form.js"></script>
<script src="../src/helpers.js"></script>
<script src="../src/validators.js"></script>
<script src="../src/field.js"></script>
<script src="../src/editors.js"></script>
<script src="../src/setup.js"></script>
<script src="../src/templates/default.js"></script>
<script>Backbone.Form = Form</script>
<script src="../src/editors/list.js"></script>
<!-- TEMPLATES -->
<link rel="stylesheet" href="../src/templates/default.css" type="text/css" media="screen" />
<!-- EXTRA EDITORS -->
<script src="../src/editors/jquery-ui.js"></script>
<link rel="stylesheet" href="../src/editors/jquery-ui.css" type="text/css" />
</head>
<body>
<h1 id="qunit-header">backbone-forms tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
<script src="_setup.js"></script>
<script src="form.js"></script>
<script src="helpers.js"></script>
<script src="validators.js"></script>
<script src="field.js"></script>
<script src="editors.js"></script>
<script src="editors/list.js"></script>
<script src="editors/jquery-ui.js"></script>
<div id="uiTest">
<div id="formContainer"></div>
<button class="validate">Validate</button>
</div>
<script>
$(function() {
Backbone.Form.setTemplates({
customField: '\
<div style="border: 1px solid blue">\
<label for="{{id}}">{{title}}</label>\
<div>{{editor}}</div>\
<div>{{help}}</div>\
</div>\
'
});
var NestedModel = Backbone.Model.extend({
schema: {
name: { validators: ['required']},
email: { validators: ['required', 'email'] }
}
});
var Model = Backbone.Model.extend({
schema: {
email: { dataType: 'email', validators: ['required', 'email'] },
tel: { type: 'Text', dataType: 'tel', validators: ['required'] },
number: { type: 'Number', validators: [/[0-9]+(?:\.[0-9]*)?/] },
checkbox: { type: 'Checkbox' },
radio: { type: 'Radio', options: ['Opt 1', 'Opt 2'] },
select: { type: 'Select', options: ['Opt 1', 'Opt 2'] },
checkboxes: { type: 'Checkboxes', options: ['Sterling', 'Lana', 'Cyril', 'Cheryl', 'Pam'] },
object: { type: 'Object', subSchema: {
name: {},
age: { type: 'Number' }
}},
nestedModel: { type: 'NestedModel', model: NestedModel },
customTemplate: { template: 'customField' },
shorthand: 'Password',
date: { type: 'Date' },
dateTime: { type: 'DateTime', yearStart: 1980, yearEnd: 2000 },
//List
textList: { type: 'List', itemType: 'Text', validators: ['required', 'email'] },
objList: { type: 'List', itemType: 'Object', subSchema: {
name: { type: 'Text', validators: ['required'] },
age: 'Number'
} },
//jQuery UI
jqueryDate: { type: 'jqueryui.Date', help: 'Some help text' },
jqueryDateTime: { type: 'jqueryui.DateTime' },
jqueryList: { type: 'jqueryui.List' }
}
});
var model = new Model({
number: null,
checkbox: true,
textList: ['item1', 'item2', 'item3'],
jqueryList: ['item1', 'item2', 'item3']
});
var form = new Backbone.Form({
model: model,
fieldsets: [
['email', 'tel', 'number', 'checkbox', 'radio', 'select', 'checkboxes', 'customTemplate', 'shorthand', 'date', 'dateTime'],
{ legend: 'Lists', fields: ['textList', 'objList'] },
{ legend: 'jQuery UI editors', fields: ['jqueryDate', 'jqueryDateTime', 'jqueryList'] },
{ legend: 'Nested editors', fields: ['object', 'nestedModel'] }
]
}).render();
window.form = form;
$('#uiTest #formContainer').html(form.el);
$('#uiTest label').click(function() {
var name = $(this).attr('for'),
$editor = $('#' + name),
key = $editor.attr('name');
var editor = form.fields[key];
console.log(editor.getValue());
});
$('#uiTest button.validate').click(function() { form.validate() });
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.