|
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8" /> |
5 | 5 | <title>Form Test</title> |
6 | | - <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" /> |
| 6 | + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" /> |
| 7 | + <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" /> |
7 | 8 | <style> |
8 | 9 |
|
9 | 10 | /* Form and inputs */ |
|
68 | 69 | <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" /> |
69 | 70 | </div> |
70 | 71 |
|
| 72 | + <div class="form-group"> |
| 73 | + <label class="control-label">Year</label> |
| 74 | + <input name="birth" class="form-control" |
| 75 | + data-validation="date" |
| 76 | + data-validation-format="yyyy-mm-dd" |
| 77 | + data-suggestions="2014-01-15,2014-01-16,2014-01-17" /> |
| 78 | + </div> |
| 79 | + |
| 80 | + <div class="form-group"> |
| 81 | + <label class="control-label">Datepicker</label> |
| 82 | + <input name="birth2" class="form-control" |
| 83 | + data-validation="date" |
| 84 | + data-validation-format="mm/dd/yyyy" |
| 85 | + id="datepicker" /> |
| 86 | + </div> |
| 87 | + |
71 | 88 | <div class="form-group password-strength"> |
72 | 89 | <label class="control-label" for="password">Display password strength (only strong)</label> |
73 | 90 | <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" /> |
|
109 | 126 | <div class="form-group"> |
110 | 127 | <label class="control-label">Text</label> |
111 | 128 | (<span id="max-len">20</span> chars left)<br /> |
112 | | - <textarea id="text-area" name="some-text"></textarea> |
| 129 | + <textarea id="text-area" class="form-control" name="some-text"></textarea> |
113 | 130 | </div> |
114 | 131 |
|
115 | 132 | <div class="form-group"> |
|
189 | 206 | <label class="control-label">Country</label> |
190 | 207 | <input name="test" data-validation="country" data-validation-error-msg="No valid country given" /> |
191 | 208 | </div> |
| 209 | + <div class="form-group"> |
| 210 | + <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label> |
| 211 | + <input name="test2" |
| 212 | + data-validation="alphanumeric" |
| 213 | + data-validation-error-msg="Invalid..." |
| 214 | + data-validation-if-checked="checker" /> |
| 215 | + <br /> |
| 216 | + <input type="checkbox" name="checker" /> |
| 217 | + </div> |
192 | 218 | <p> |
193 | 219 | <input type="submit" class="button"> |
194 | 220 | <input type="reset" class="button"> |
195 | 221 | </p> |
196 | 222 | </form> |
197 | 223 | </div> |
198 | 224 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
| 225 | +<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> |
199 | 226 | <script src="jquery.form-validator.js"></script> |
200 | 227 | <script> |
201 | 228 | (function($, window) { |
202 | 229 |
|
203 | 230 | var dev = window.location.hash.indexOf('dev') > -1 ? '.dev' : ''; |
204 | 231 |
|
| 232 | + // setup datepicker |
| 233 | + $("#datepicker").datepicker(); |
205 | 234 |
|
206 | 235 | // Add a new validator |
207 | 236 | $.formUtils.addValidator({ |
|
273 | 302 | console.log('About to validate input "'+this.name+'"'); |
274 | 303 | }) |
275 | 304 | .on('validation', function(evt, isValid) { |
276 | | - console.log('Input '+this.name+' is '+( isValid ? 'VALID':'NOT VALID')); |
| 305 | + var validationResult = ''; |
| 306 | + if( isValid === null ) { |
| 307 | + validationResult = 'not validated'; |
| 308 | + } else if( isValid ) { |
| 309 | + validationResult = 'VALID'; |
| 310 | + } else { |
| 311 | + validationResult = 'INVALID'; |
| 312 | + } |
| 313 | + console.log('Input '+this.name+' is '+validationResult); |
277 | 314 | }); |
278 | 315 |
|
279 | 316 | })(jQuery, window); |
|
0 commit comments