KAWWA Markup Pattern Library


Forms

Error Field Component Information

  • Class name: (k-field-error)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

After form validation, indicates the user the exact input fields with error. It presents a contextual error message also.

A comment about the error

HTML5 Plain Code

COPY
  1. <p><label for="field2">Enter something:</label>
  2. 	<input class="k-field-error" type="text" id="field2" name="field2" aria-invalid="true"/>
  3. 	<span class="k-contextual-error">A comment about the error</span></p>

CSS Code

COPY
  1. /* Field error */
  2. input.k-field-error {
  3. 	color: #FFF;
  4. 	background-color: #C00;
  5. }
  6. 
                                
  7. label.k-field-error {
  8. 	color: #C00;
  9. 	background-color: #FFF;
  10. }
  11. 
                                
  12. /* Contextual field error message */
  13. .k-contextual-error {
  14. 	font: 90% open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  15. 	color: #C00;
  16. 	background: transparent;
  17. 	padding-left: 5px;
  18. 	vertical-align: 4px;
  19. }
  20. 	.k-contextual-error:before {
  21. 		content: "\26A0 \00A0 ";
  22. 		font-size: 120%;
  23. 		vertical-align: top;
  24. 	}
  25. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

When your Tapestry Form will have fail, the Kawwa library will automatically add the CSS classes to the fields with error.

For a Radio or a Checkbox, the k-field-error will be added to each label element. The block displaying the error message should be added by yourself, according to the Kawwa2 specifications. For retrieving the error message of a specific field, you should inject the form component, and use the getDefaultTracker().getError(myComponent) method.

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3.  	<t:form t:clientValidation="false" t:id="form">
  4.  		
  5.  		<t:label t:for="value">Enter something: </t:label>
  6.  		<t:textfield t:id="value" t:validate="required"/><br />
  7.  		
  8.  		<t:submit />
  9.  	</t:form>
  10. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import org.apache.tapestry5.annotations.Property;
  4. 
                                
  5. public class Form {
  6. 	
  7. 	@Property
  8. 	private String value;
  9. 	
  10. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce