jquerymx/model/validations/validations.html at master · nancoder/jquerymx · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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>
<div id="demo-instructions">
		<h1>Model Validations Demo</h1>
		<p>This demo demonstrates using validations to prevent
		a person's birthday from being in the future.</p>
		<p>Clicking a person's name will show a form to update
		their birthday.  Change the birthday and 'blur' the
		input to update their listed age.</p>
</div>
<div id="demo-html">
<div id='contacts1'></div>
<div id='update'></div>
</div>
<script type='text/javascript'
        src='../../../steal/steal.js'>
</script>
<script type='text/javascript'  id="demo-source">
steal('jquery/model',
		'jquery/dom/fixture',
		'jquery/model/list',
		'jquery/model/validations').then(function(){

$.Model.convert.date = function(raw){
	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;
	}
};

$.fixture("/contacts.json", function(){
  return [[{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20'},
	       {'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10'},
	       {'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}]];
});
$.fixture("/contacts/{id}.json", function() {
	return {};
})

$.Model("Contact",{
	init : function(){
		this.validate("birthday",function(){
			if(this.birthday == null){
				return "your birthday needs to be formatted YYYY-MM-DD"
			}
			if(this.birthday > new Date){
				return "your birthday needs to be in the past"
			}
		})
	},
	attributes : {
		birthday : 'date'
	},
	findAll : "/contacts.json",
	update : "/contacts/{id}.json"
},{
	ageThisYear : function(){
		return new Date().getFullYear() -
		      this.birthday.getFullYear()
	},
	getBirthday : function(){
		return ""+this.birthday.getFullYear()+
			"-"+(this.birthday.getMonth()+1)+
			"-"+this.birthday.getDate();
	}

});

makeAgeUpdater = function(contact){
	var updater = $("#update")
	updater.html("");
	updater.append("<span>" +contact.name+"'s birthday </span>")
	$('<input/>').val(contact.attr("birthday")).change(function(){


		contact.attr("birthday", this.value , function(){
			$('#error').hide();
		}, function(errors){
			$('#error').html(errors.birthday[0]).show();
		})
	}).appendTo(updater);
	updater.append("<div id='error' style='display:none'><div>");
}
	// List 1
Contact.findAll({},function(contacts){
  var contactsEl = $('#contacts1');
  $.each(contacts, function(i, contact){
    var li = $('<li>')
              .model(contact)
              .html(contact.name+" "+contact.ageThisYear()+
                    " <a>Show</a>")
              .appendTo(contactsEl);
    contact.bind("birthday", function(){
      li.html(contact.name+" "+this.ageThisYear()+
              " <a>Show</a>");
    })
  })

  contactsEl.delegate("li","click", function(){
	 makeAgeUpdater( $(this).closest('.contact').model() );
  });
});
})
</script>
	</body>
</html>