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
124
125
126
127
|
<div class="row" ng-init="sampleData = { country: 'US' }">
<div class="col--lg-6-of-12">
<div class="form-field">
<input class="text-input" id="first_name" ng-model="sampleData.firstName" required="" /><label for="first_name">First Name</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Tell us your first name.
</div>
</div>
</div>
</div>
<div class="col--lg-6-of-12">
<div class="form-field">
<input class="text-input" id="last_name" ng-model="sampleData.lastName" required="" /><label for="last_name">Last Name</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Tell us your last name.
</div>
</div>
</div>
</div>
<div class="col--sm-4-of-4">
<div class="form-field">
<input class="text-input" id="address" ng-model="sampleData.address" required="" /><label for="address">Address</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Please fill out your address.
</div>
</div>
</div>
</div>
<div class="col--sm-4-of-4">
<div class="form-field">
<input class="text-input" id="email" ng-model="sampleData.email" required="" type="email" /><label for="email">Email</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Please fill out your address.
</div>
<div class="form-notice__message form-notice__message--email">
Please enter a valid email address.
</div>
</div>
</div>
</div>
<div class="col--sm-4-of-4">
<div class="form-field">
<div class="row">
<div class="col--sm-2-of-4">
<input id="country_US" name="country" ng-model="sampleData.country" type="radio" value="US" /><label for="country_US">United States</label>
</div>
<div class="col--sm-2-of-4">
<input id="country_CA" name="country" ng-model="sampleData.country" type="radio" value="CA" /><label for="country_CA">Canada</label>
</div>
</div>
</div>
</div>
<div class="col--lg-6-of-12">
<div class="form-field">
<input class="text-input" id="city" ng-model="sampleData.city" required="" /><label for="city">City</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Please provide a city.
</div>
</div>
</div>
</div>
<div class="col--md-4-of-8 col--lg-3-of-12" ng-switch="sampleData.country">
<div class="form-field" ng-switch-when="CA">
<select id="province_CA">
<option class="label" disabled="" selected="" value="">
Province
</option>
<option value="AB">
Alberta
</option>
<option value="BC">
British Columbia
</option>
</select><label for="province_CA">Province</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Please select a province.
</div>
</div>
</div>
<div class="form-field" ng-switch-default="">
<select id="province_US">
<option class="label" disabled="" selected="" value="">
State
</option>
<option value="New Jersey">
New Jersey
</option>
<option value="New York">
New York
</option>
</select><label for="province_US">State</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Please select a state.
</div>
</div>
</div>
</div>
<div class="col--md-4-of-8 col--lg-3-of-12" ng-switch="sampleData.country">
<div class="form-field" ng-switch-when="CA">
<input class="text-input" id="postal_code" ng-model="sampleData.postalCode" required="" /><label for="postal_code">Postal Code</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Tell us your postal code.
</div>
</div>
</div>
<div class="form-field" ng-switch-default="">
<input class="text-input" id="zip" ng-model="sampleData.postalCode" pattern="\d+" required="" /><label for="zip">ZIP Code</label>
<div class="form-notice">
<div class="form-notice__message form-notice__message--required">
Tell us your ZIP code.
</div>
<div class="form-notice__message form-notice__message--pattern">
ZIP code is not valid.
</div>
</div>
</div>
</div>
</div> |