jquerypp/model/validations/demo.html at builder · Yesplan/jquerypp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model Validations Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
			li a {color: red; font-weight: bold;}
			p {width: 400px;}
        </style>
	</head>
	<body>
<form>

</form>
</div>
<script type='text/javascript'
        src='../../../steal/steal.js'>
</script>
<script type='text/javascript'  id="demo-source">
steal('jquerypp/model',
		'jquerypp/dom/fixture',
		'jquerypp/model/list',
		'jquerypp/model/validations',
		'jquerypp/controller').then(function(){

$.Model("Contact",{
	init : function(){
		this.validate("birthday",function(bday){
			if(!bday){
				return "you must provide a birthday";
			}
			if(bday > new Date){
				return "your birthday needs to be in the past";
			}
		})
	},
	attributes : {
		birthday : 'date'
	},
	convert: {
		date: function(raw, error){
			if (typeof raw == 'string') {
				var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
				return matches ? new Date(+matches[1], (+matches[2]) - 1, +matches[3])
					: null;
			}
			else if (raw instanceof Date) {
				return raw;
			}
		}
	},
	serialize : {
		date :  function(){

		}
	}
},{
	ageThisYear : function(){
		return new Date().getFullYear() -
		      this.birthday.getFullYear()
	},
	getBirthday : function(){
		return ""+this.birthday.getFullYear()+
			"-"+(this.birthday.getMonth()+1)+
			"-"+this.birthday.getDate();
	}

});

$.Controller("ErrorReport",
{
	defaults : {
		model : null,
		attr: null
	}
},{
	init : function(){
		this.toggle();
	},
	// listen to a attr be successfully set
	"{model} {attr}" : function(){
		this.toggle();
	},
	// listen to a change that produces an error
	"{model} error.{attr}" : function(){
		this.toggle();
	},
	toggle : function(){
		var errors = this.options.model.errors(this.options.attr)
		if(errors){
			this.element.html(errors[0]).fadeIn()
		} else {
			this.element.hide()
		}
	}
});

})


</script>
	</body>
</html>