Subversion-Projekte lars-tiefland.zeldi.de_alt

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1
QUnit.module( "placement" );
2
 
3
QUnit.test( "elements() order", function( assert ) {
4
	var container = $( "#orderContainer" ),
5
		v = $( "#elementsOrder" ).validate( {
6
			errorLabelContainer: container,
7
			wrap: "li"
8
		} );
9
 
10
	assert.deepEqual(
11
		v.elements().map( function() {
12
			return $( this ).attr( "id" );
13
		} ).get(),
14
		[
15
			"order1",
16
			"order2",
17
			"order3",
18
			"order4",
19
			"order5",
20
			"order6"
21
		],
22
		"elements must be in document order"
23
	);
24
 
25
	v.form();
26
	assert.deepEqual(
27
		container.children().map( function() {
28
			return $( this ).attr( "id" );
29
		} ).get(),
30
		[
31
			"order1-error",
32
			"order2-error",
33
			"order3-error",
34
			"order4-error",
35
			"order5-error",
36
			"order6-error"
37
		],
38
		"labels in error container must be in document order"
39
	);
40
} );
41
 
42
QUnit.test( "error containers, simple", function( assert ) {
43
	assert.expect( 14 );
44
	var container = $( "#simplecontainer" ),
45
		v = $( "#form" ).validate( {
46
			errorLabelContainer: container,
47
			showErrors: function() {
48
				container.find( "h3" ).html( jQuery.validator.format( "There are {0} errors in your form.", this.size() ) );
49
				this.defaultShowErrors();
50
			}
51
		} );
52
 
53
	v.prepareForm();
54
	assert.ok( v.valid(), "form is valid" );
55
	assert.equal( container.find( ".error:not(input)" ).length, 0, "There should be no error labels" );
56
	assert.equal( container.find( "h3" ).html(), "" );
57
 
58
	v.prepareForm();
59
	v.errorList = [
60
		{
61
			message: "bar",
62
			element: {
63
				name: "foo"
64
			}
65
		},
66
		{
67
			message: "necessary",
68
			element: {
69
				name: "required"
70
			}
71
		}
72
	];
73
 
74
	assert.ok( !v.valid(), "form is not valid after adding errors manually" );
75
	v.showErrors();
76
	assert.equal( container.find( ".error:not(input)" ).length, 2, "There should be two error labels" );
77
	assert.ok( container.is( ":visible" ), "Check that the container is visible" );
78
	container.find( ".error:not(input)" ).each( function() {
79
		assert.ok( $( this ).is( ":visible" ), "Check that each label is visible" );
80
	} );
81
	assert.equal( container.find( "h3" ).html(), "There are 2 errors in your form." );
82
 
83
	v.prepareForm();
84
	assert.ok( v.valid(), "form is valid after a reset" );
85
	v.showErrors();
86
	assert.equal( container.find( ".error:not(input)" ).length, 2, "There should still be two error labels" );
87
	assert.ok( container.is( ":hidden" ), "Check that the container is hidden" );
88
	container.find( ".error:not(input)" ).each( function() {
89
		assert.ok( $( this ).is( ":hidden" ), "Check that each label is hidden" );
90
	} );
91
} );
92
 
93
QUnit.test( "error containers, with labelcontainer I", function( assert ) {
94
	assert.expect( 16 );
95
	var container = $( "#container" ),
96
		labelcontainer = $( "#labelcontainer" ),
97
		v = $( "#form" ).validate( {
98
			errorContainer: container,
99
			errorLabelContainer: labelcontainer,
100
			wrapper: "li"
101
		} );
102
 
103
	assert.ok( v.valid(), "form is valid" );
104
	assert.equal( container.find( ".error:not(input)" ).length, 0, "There should be no error labels in the container" );
105
	assert.equal( labelcontainer.find( ".error:not(input)" ).length, 0, "There should be no error labels in the labelcontainer" );
106
	assert.equal( labelcontainer.find( "li" ).length, 0, "There should be no lis labels in the labelcontainer" );
107
 
108
	v.errorList = [
109
		{
110
			message: "bar",
111
			element: {
112
				name: "foo"
113
			}
114
		},
115
		{
116
			name: "required",
117
			message: "necessary",
118
			element: {
119
				name: "required"
120
			}
121
		}
122
	];
123
 
124
	assert.ok( !v.valid(), "form is not valid after adding errors manually" );
125
	v.showErrors();
126
	assert.equal( container.find( ".error:not(input)" ).length, 0, "There should be no error label in the container" );
127
	assert.equal( labelcontainer.find( ".error:not(input)" ).length, 2, "There should be two error labels in the labelcontainer" );
128
	assert.equal( labelcontainer.find( "li" ).length, 2, "There should be two error lis in the labelcontainer" );
129
	assert.ok( container.is( ":visible" ), "Check that the container is visible" );
130
	assert.ok( labelcontainer.is( ":visible" ), "Check that the labelcontainer is visible" );
131
	labelcontainer.find( ".error:not(input)" ).each( function() {
132
		assert.ok( $( this ).is( ":visible" ), "Check that each label is visible1" );
133
		assert.equal( $( this ).parent()[ 0 ].tagName.toLowerCase(), "li", "Check that each label is wrapped in an li" );
134
		assert.ok( $( this ).parent( "li" ).is( ":visible" ), "Check that each parent li is visible" );
135
	} );
136
} );
137
 
138
QUnit.test( "errorcontainer, show/hide only on submit", function( assert ) {
139
	assert.expect( 14 );
140
	var container = $( "#container" ),
141
		labelContainer = $( "#labelcontainer" ),
142
		v = $( "#testForm1" ).bind( "invalid-form.validate", function() {
143
			assert.ok( true, "invalid-form event triggered called" );
144
		} ).validate( {
145
			errorContainer: container,
146
			errorLabelContainer: labelContainer,
147
			showErrors: function() {
148
				container.html( jQuery.validator.format( "There are {0} errors in your form.", this.numberOfInvalids() ) );
149
				assert.ok( true, "showErrors called" );
150
				this.defaultShowErrors();
151
			}
152
		} );
153
 
154
	assert.equal( container.html(), "", "must be empty" );
155
	assert.equal( labelContainer.html(), "", "must be empty" );
156
 
157
	// Validate whole form, both showErrors and invalidHandler must be called once
158
	// preferably invalidHandler first, showErrors second
159
	assert.ok( !v.form(), "invalid form" );
160
	assert.equal( labelContainer.find( ".error:not(input)" ).length, 2 );
161
	assert.equal( container.html(), "There are 2 errors in your form." );
162
	assert.ok( labelContainer.is( ":visible" ), "must be visible" );
163
	assert.ok( container.is( ":visible" ), "must be visible" );
164
 
165
	$( "#firstname" ).val( "hix" ).keyup();
166
	$( "#testForm1" ).triggerHandler( "keyup", [
167
			jQuery.event.fix( {
168
				type: "keyup",
169
				target: $( "#firstname" )[ 0 ]
170
			} )
171
		] );
172
	assert.equal( labelContainer.find( ".error:visible" ).length, 1 );
173
	assert.equal( container.html(), "There are 1 errors in your form." );
174
 
175
	$( "#lastname" ).val( "abc" );
176
	assert.ok( v.form(), "Form now valid, trigger showErrors but not invalid-form" );
177
} );
178
 
179
QUnit.test( "test label used as error container", function( assert ) {
180
	assert.expect( 8 );
181
	var form = $( "#testForm16" ),
182
		field = $( "#testForm16text" );
183
 
184
	form.validate( {
185
		errorPlacement: function( error, element ) {
186
 
187
			// Append error within linked label
188
			$( "label[for='" + element.attr( "id" ) + "']" ).append( error );
189
		},
190
		errorElement: "span"
191
	} );
192
 
193
	assert.ok( !field.valid() );
194
	assert.equal( field.next( "label" ).contents().first().text(), "Field Label", "container label isn't disrupted" );
195
	assert.hasError( field, "missing" );
196
	assert.ok( !field.attr( "aria-describedby" ), "field does not require aria-describedby attribute" );
197
 
198
	field.val( "foo" );
199
	assert.ok( field.valid() );
200
	assert.equal( field.next( "label" ).contents().first().text(), "Field Label", "container label isn't disrupted" );
201
	assert.ok( !field.attr( "aria-describedby" ), "field does not require aria-describedby attribute" );
202
	assert.noErrorFor( field );
203
} );
204
 
205
QUnit.test( "test error placed adjacent to descriptive label", function( assert ) {
206
	assert.expect( 8 );
207
	var form = $( "#testForm16" ),
208
		field = $( "#testForm16text" );
209
 
210
	form.validate( {
211
		errorElement: "span"
212
	} );
213
 
214
	assert.ok( !field.valid() );
215
	assert.equal( form.find( "label" ).length, 1 );
216
	assert.equal( form.find( "label" ).text(), "Field Label", "container label isn't disrupted" );
217
	assert.hasError( field, "missing" );
218
 
219
	field.val( "foo" );
220
	assert.ok( field.valid() );
221
	assert.equal( form.find( "label" ).length, 1 );
222
	assert.equal( form.find( "label" ).text(), "Field Label", "container label isn't disrupted" );
223
	assert.noErrorFor( field );
224
} );
225
 
226
QUnit.test( "test descriptive label used alongside error label", function( assert ) {
227
	assert.expect( 8 );
228
	var form = $( "#testForm16" ),
229
		field = $( "#testForm16text" );
230
 
231
	form.validate( {
232
		errorElement: "label"
233
	} );
234
 
235
	assert.ok( !field.valid() );
236
	assert.equal( form.find( "label.title" ).length, 1 );
237
	assert.equal( form.find( "label.title" ).text(), "Field Label", "container label isn't disrupted" );
238
	assert.hasError( field, "missing" );
239
 
240
	field.val( "foo" );
241
	assert.ok( field.valid() );
242
	assert.equal( form.find( "label.title" ).length, 1 );
243
	assert.equal( form.find( "label.title" ).text(), "Field Label", "container label isn't disrupted" );
244
	assert.noErrorFor( field );
245
} );
246
 
247
QUnit.test( "test custom errorElement", function( assert ) {
248
	assert.expect( 4 );
249
	var form = $( "#userForm" ),
250
		field = $( "#username" );
251
 
252
	form.validate( {
253
		messages: {
254
			username: "missing"
255
		},
256
		errorElement: "label"
257
	} );
258
 
259
	assert.ok( !field.valid() );
260
	assert.hasError( field, "missing", "Field should have error 'missing'" );
261
	field.val( "foo" );
262
	assert.ok( field.valid() );
263
	assert.noErrorFor( field, "Field should not have a visible error" );
264
} );
265
 
266
QUnit.test( "test existing label used as error element", function( assert ) {
267
	assert.expect( 4 );
268
	var form = $( "#testForm14" ),
269
		field = $( "#testForm14text" );
270
 
271
	form.validate( { errorElement: "label" } );
272
 
273
	assert.ok( !field.valid() );
274
	assert.hasError( field, "required" );
275
 
276
	field.val( "foo" );
277
	assert.ok( field.valid() );
278
	assert.noErrorFor( field );
279
} );
280
 
281
QUnit.test( "test existing non-label used as error element", function( assert ) {
282
	assert.expect( 4 );
283
	var form = $( "#testForm15" ),
284
		field = $( "#testForm15text" );
285
 
286
	form.validate( { errorElement: "span" } );
287
 
288
	assert.ok( !field.valid() );
289
	assert.hasError( field, "required" );
290
 
291
	field.val( "foo" );
292
	assert.ok( field.valid() );
293
	assert.noErrorFor( field );
294
} );
295
 
296
QUnit.test( "test aria-describedby with input names contains CSS-selector meta-characters", function( assert ) {
297
	var form = $( "#testForm21" ),
298
		field = $( "#testForm21\\!\\#\\$\\%\\&\\'\\(\\)\\*\\+\\,\\.\\/\\:\\;\\<\\=\\>\\?\\@\\[\\\\\\]\\^\\`\\{\\|\\}\\~" );
299
 
300
	assert.equal( field.attr( "aria-describedby" ), undefined );
301
 
302
	form.validate( {
303
		errorElement: "span",
304
		errorPlacement: function() {
305
 
306
			// Do something
307
		}
308
	} );
309
 
310
	// Validate the element
311
	assert.ok( !field.valid() );
312
	assert.equal( field.attr( "aria-describedby" ), "testForm21!#$%&'()*+,./:;<=>?@[\\]^`{|}~-error" );
313
 
314
	// Re-run validation
315
	field.val( "some" );
316
	field.trigger( "keyup" );
317
 
318
	field.val( "something" );
319
	field.trigger( "keyup" );
320
 
321
	assert.equal( field.attr( "aria-describedby" ), "testForm21!#$%&'()*+,./:;<=>?@[\\]^`{|}~-error", "`aria-describedby` should remain the same as before." );
322
 
323
	// Re-run validation
324
	field.val( "something something" );
325
	field.trigger( "keyup" );
326
 
327
	assert.ok( field.valid() );
328
	assert.equal( field.attr( "aria-describedby" ), "testForm21!#$%&'()*+,./:;<=>?@[\\]^`{|}~-error", "`aria-describedby` should remain the same as before." );
329
} );
330
 
331
QUnit.test( "test existing non-error aria-describedby", function( assert ) {
332
	assert.expect( 8 );
333
	var form = $( "#testForm17" ),
334
		field = $( "#testForm17text" );
335
 
336
	assert.equal( field.attr( "aria-describedby" ), "testForm17text-description" );
337
	form.validate( { errorElement: "span" } );
338
 
339
	assert.ok( !field.valid() );
340
	assert.equal( field.attr( "aria-describedby" ), "testForm17text-description testForm17text-error" );
341
	assert.hasError( field, "required" );
342
 
343
	field.val( "foo" );
344
	assert.ok( field.valid() );
345
	assert.noErrorFor( field );
346
 
347
	assert.strictEqual( $( "#testForm17text-description" ).text(), "This is where you enter your data" );
348
	assert.strictEqual( $( "#testForm17text-error" ).text(), "", "Error label is empty for valid field" );
349
} );
350
 
351
QUnit.test( "test pre-assigned non-error aria-describedby", function( assert ) {
352
	assert.expect( 7 );
353
	var form = $( "#testForm17" ),
354
		field = $( "#testForm17text" );
355
 
356
	// Pre-assign error identifier
357
	field.attr( "aria-describedby", "testForm17text-description testForm17text-error" );
358
	form.validate( { errorElement: "span" } );
359
 
360
	assert.ok( !field.valid() );
361
	assert.equal( field.attr( "aria-describedby" ), "testForm17text-description testForm17text-error" );
362
	assert.hasError( field, "required" );
363
 
364
	field.val( "foo" );
365
	assert.ok( field.valid() );
366
	assert.noErrorFor( field );
367
 
368
	assert.strictEqual( $( "#testForm17text-description" ).text(), "This is where you enter your data" );
369
	assert.strictEqual( $( "#testForm17text-error" ).text(), "", "Error label is empty for valid field" );
370
} );
371
 
372
QUnit.test( "test id/name containing brackets", function( assert ) {
373
	var form = $( "#testForm18" ),
374
		field = $( "#testForm18\\[text\\]" );
375
 
376
	form.validate( {
377
		errorElement: "span"
378
	} );
379
 
380
	form.valid();
381
	field.valid();
382
	assert.hasError( field, "required" );
383
} );
384
 
385
QUnit.test( "test id/name containing $", function( assert ) {
386
	var form = $( "#testForm19" ),
387
		field = $( "#testForm19\\$text" );
388
 
389
	form.validate( {
390
		errorElement: "span"
391
	} );
392
 
393
	field.valid();
394
	assert.hasError( field, "required" );
395
} );
396
 
397
QUnit.test( "test id/name containing single quotes", function( assert ) {
398
	var v = $( "#testForm20" ).validate(),
399
		textElement = $( "#testForm20\\[\\'textinput\\'\\]" ),
400
		checkboxElement = $( "#testForm20\\[\\'checkboxinput\\'\\]" ),
401
		radioElement = $( "#testForm20\\[\\'radioinput\\'\\]" );
402
 
403
	v.form();
404
 
405
	assert.equal( v.numberOfInvalids(), 3, "There is three invalid elements" );
406
	assert.equal( v.invalidElements()[ 0 ], textElement[ 0 ], "The element should be invalid" );
407
	assert.equal( v.invalidElements()[ 1 ], checkboxElement[ 0 ], "The text element should be invalid" );
408
	assert.equal( v.invalidElements()[ 2 ], radioElement[ 0 ], "The text element should be invalid" );
409
} );
410
 
411
QUnit.test( "#1632: Error hidden, but input error class not removed", function( assert ) {
412
	var v = $( "#testForm23" ).validate( {
413
			rules: {
414
				box1: {
415
					required: {
416
						depends: function() {
417
							return !!$( "#box2" ).val();
418
						}
419
					}
420
				},
421
				box2: {
422
					required: {
423
						depends: function() {
424
							return !!$( "#box1" ).val();
425
						}
426
					}
427
				}
428
			}
429
		} ),
430
		box1 = $( "#box1" ),
431
		box2 = $( "#box2" );
432
 
433
	box1.val( "something" );
434
	v.form();
435
	assert.equal( v.numberOfInvalids(), 1, "There is only one invlid element" );
436
	assert.equal( v.invalidElements()[ 0 ], box2[ 0 ], "The box2 element should be invalid" );
437
 
438
	box1.val( "" );
439
	v.form();
440
	assert.equal( v.numberOfInvalids(), 0, "There is no error" );
441
	assert.equal( box2.hasClass( "error" ), false, "Box2 should not have an error class" );
442
} );