PageRenderTime 82ms CodeModel.GetById 45ms app.highlight 18ms RepoModel.GetById 15ms app.codeStats 1ms

/test/error-placement.js

https://github.com/timbeadle/jquery-validation
JavaScript | 312 lines | 265 code | 44 blank | 3 comment | 0 complexity | a1ef24ca373bb52b8356bd601072230a MD5 | raw file
  1module( "placement" );
  2
  3test( "elements() order", function() {
  4	var container = $( "#orderContainer" ),
  5		v = $( "#elementsOrder" ).validate({
  6			errorLabelContainer: container,
  7			wrap: "li"
  8		});
  9
 10	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	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
 42test( "error containers, simple", function() {
 43	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	ok( v.valid(), "form is valid" );
 55	equal( 0, container.find( ".error:not(input)" ).length, "There should be no error labels" );
 56	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	ok( !v.valid(), "form is not valid after adding errors manually" );
 75	v.showErrors();
 76	equal( container.find( ".error:not(input)" ).length, 2, "There should be two error labels" );
 77	ok( container.is( ":visible" ), "Check that the container is visible" );
 78	container.find( ".error:not(input)" ).each(function() {
 79		ok( $( this ).is( ":visible" ), "Check that each label is visible" );
 80	});
 81	equal( "There are 2 errors in your form.", container.find( "h3" ).html() );
 82
 83	v.prepareForm();
 84	ok( v.valid(), "form is valid after a reset" );
 85	v.showErrors();
 86	equal( container.find( ".error:not(input)" ).length, 2, "There should still be two error labels" );
 87	ok( container.is( ":hidden" ), "Check that the container is hidden" );
 88	container.find( ".error:not(input)" ).each(function() {
 89		ok( $( this ).is( ":hidden" ), "Check that each label is hidden" );
 90	});
 91});
 92
 93test( "error containers, with labelcontainer I", function() {
 94	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	ok( v.valid(), "form is valid" );
104	equal( 0, container.find( ".error:not(input)" ).length, "There should be no error labels in the container" );
105	equal( 0, labelcontainer.find( ".error:not(input)" ).length, "There should be no error labels in the labelcontainer" );
106	equal( 0, labelcontainer.find( "li" ).length, "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	ok( !v.valid(), "form is not valid after adding errors manually" );
125	v.showErrors();
126	equal( 0, container.find( ".error:not(input)" ).length, "There should be no error label in the container" );
127	equal( 2, labelcontainer.find( ".error:not(input)" ).length, "There should be two error labels in the labelcontainer" );
128	equal( 2, labelcontainer.find( "li" ).length, "There should be two error lis in the labelcontainer" );
129	ok( container.is( ":visible" ), "Check that the container is visible" );
130	ok( labelcontainer.is( ":visible" ), "Check that the labelcontainer is visible" );
131	labelcontainer.find( ".error:not(input)" ).each(function() {
132		ok( $( this ).is( ":visible" ), "Check that each label is visible1" );
133		equal( "li", $( this ).parent()[0].tagName.toLowerCase(), "Check that each label is wrapped in an li" );
134		ok( $( this ).parent( "li" ).is( ":visible" ), "Check that each parent li is visible" );
135	});
136});
137
138test( "errorcontainer, show/hide only on submit", function() {
139	expect( 14 );
140	var container = $( "#container" ),
141		labelContainer = $( "#labelcontainer" ),
142		v = $( "#testForm1" ).bind( "invalid-form.validate", function() {
143			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				ok( true, "showErrors called" );
150				this.defaultShowErrors();
151			}
152		});
153
154	equal( "", container.html(), "must be empty" );
155	equal( "", labelContainer.html(), "must be empty" );
156	// validate whole form, both showErrors and invalidHandler must be called once
157	// preferably invalidHandler first, showErrors second
158	ok( !v.form(), "invalid form" );
159	equal( 2, labelContainer.find( ".error:not(input)" ).length );
160	equal( "There are 2 errors in your form.", container.html() );
161	ok( labelContainer.is( ":visible" ), "must be visible" );
162	ok( container.is( ":visible" ), "must be visible" );
163
164	$( "#firstname" ).val( "hix" ).keyup();
165	$( "#testForm1" ).triggerHandler( "keyup", [
166			jQuery.event.fix({
167				type: "keyup",
168				target: $( "#firstname" )[ 0 ]
169			})
170		]);
171	equal( 1, labelContainer.find( ".error:visible" ).length );
172	equal( "There are 1 errors in your form.", container.html() );
173
174	$( "#lastname" ).val( "abc" );
175	ok( v.form(), "Form now valid, trigger showErrors but not invalid-form" );
176});
177
178test( "test label used as error container", function(assert) {
179	expect( 8 );
180	var form = $( "#testForm16" ),
181		field = $( "#testForm16text" );
182
183	form.validate({
184		errorPlacement: function( error, element ) {
185			// Append error within linked label
186			$( "label[for='" + element.attr( "id" ) + "']" ).append( error );
187		},
188		errorElement: "span"
189	});
190
191	ok( !field.valid() );
192	equal( "Field Label", field.next( "label" ).contents().first().text(), "container label isn't disrupted" );
193	assert.hasError(field, "missing");
194	ok( !field.attr( "aria-describedby" ), "field does not require aria-describedby attribute" );
195
196	field.val( "foo" );
197	ok( field.valid() );
198	equal( "Field Label", field.next( "label" ).contents().first().text(), "container label isn't disrupted" );
199	ok( !field.attr( "aria-describedby" ), "field does not require aria-describedby attribute" );
200	assert.noErrorFor(field);
201});
202
203test( "test error placed adjacent to descriptive label", function(assert) {
204	expect( 8 );
205	var form = $( "#testForm16" ),
206		field = $( "#testForm16text" );
207
208	form.validate({
209		errorElement: "span"
210	});
211
212	ok( !field.valid() );
213	equal( 1, form.find( "label" ).length );
214	equal( "Field Label", form.find( "label" ).text(), "container label isn't disrupted" );
215	assert.hasError( field, "missing" );
216
217	field.val( "foo" );
218	ok( field.valid() );
219	equal( 1, form.find( "label" ).length );
220	equal( "Field Label", form.find( "label" ).text(), "container label isn't disrupted" );
221	assert.noErrorFor( field );
222});
223
224test( "test descriptive label used alongside error label", function(assert) {
225	expect( 8 );
226	var form = $( "#testForm16" ),
227		field = $( "#testForm16text" );
228
229	form.validate({
230		errorElement: "label"
231	});
232
233	ok( !field.valid() );
234	equal( 1, form.find( "label.title" ).length );
235	equal( "Field Label", form.find( "label.title" ).text(), "container label isn't disrupted" );
236	assert.hasError( field, "missing" );
237
238	field.val( "foo" );
239	ok( field.valid() );
240	equal( 1, form.find( "label.title" ).length );
241	equal( "Field Label", form.find( "label.title" ).text(), "container label isn't disrupted" );
242	assert.noErrorFor( field );
243});
244
245test( "test custom errorElement", function(assert) {
246	expect( 4 );
247	var form = $( "#userForm" ),
248		field = $( "#username" );
249
250	form.validate({
251		messages: {
252			username: "missing"
253		},
254		errorElement: "label"
255	});
256
257	ok( !field.valid() );
258	assert.hasError( field, "missing", "Field should have error 'missing'" );
259	field.val( "foo" );
260	ok( field.valid() );
261	assert.noErrorFor( field, "Field should not have a visible error" );
262});
263
264test( "test existing label used as error element", function(assert) {
265	expect( 4 );
266	var form = $( "#testForm14" ),
267		field = $( "#testForm14text" );
268
269	form.validate({ errorElement: "label" });
270
271	ok( !field.valid() );
272	assert.hasError( field, "required" );
273
274	field.val( "foo" );
275	ok( field.valid() );
276	assert.noErrorFor( field );
277});
278
279test( "test existing non-label used as error element", function(assert) {
280	expect( 4 );
281	var form = $( "#testForm15" ),
282		field = $( "#testForm15text" );
283
284	form.validate({ errorElement: "span" });
285
286	ok( !field.valid() );
287	assert.hasError( field, "required" );
288
289	field.val( "foo" );
290	ok( field.valid() );
291	assert.noErrorFor( field );
292});
293
294test( "test existing non-error aria-describedby", function( assert ) {
295	expect( 8 );
296	var form = $( "#testForm17" ),
297		field = $( "#testForm17text" );
298
299	equal( field.attr( "aria-describedby" ), "testForm17text-description" );
300	form.validate({ errorElement: "span" });
301
302	ok( !field.valid() );
303	equal( field.attr( "aria-describedby" ), "testForm17text-description testForm17text-error" );
304	assert.hasError( field, "required" );
305
306	field.val( "foo" );
307	ok( field.valid() );
308	assert.noErrorFor( field );
309
310	strictEqual( "This is where you enter your data", $("#testForm17text-description").text() );
311	strictEqual( "", $("#testForm17text-error").text(), "Error label is empty for valid field" );
312});