[ KAWWA PORTAL ] Components : Error Field

Forms

Error Field

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

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

Demo
Snippets
Tapestry Integration

Enter something: A comment about the error

HTML5 Plain Code

COPY

<p><label for="field2">Enter something:</label>

	<input class="k-field-error" type="text" id="field2" name="field2" aria-invalid="true"/>

	<span class="k-contextual-error">A comment about the error</span></p>

CSS Code

COPY

```
/* Field error */
```
```
input.k-field-error {
```
```
	color: #FFF;
```
```
	background-color: #C00;
```
```
}
```
```
label.k-field-error {
```
```
	color: #C00;
```
```
	background-color: #FFF;
```
```
}
```
```
/* Contextual field error message */
```
```
.k-contextual-error {
```

	font: 90% open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
	color: #C00;
```
```
	background: transparent;
```
```
	padding-left: 5px;
```
```
	vertical-align: 4px;
```
```
}
```
```
	.k-contextual-error:before {
```
```
		content: "\26A0 \00A0 ";
```
```
		font-size: 120%;
```
```
		vertical-align: top;
```
```
	}
```

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

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```

 	<t:form t:clientValidation="false" t:id="form">

```
 		
```

 		<t:label t:for="value">Enter something: </t:label>

 		<t:textfield t:id="value" t:validate="required"/><br />

```
 		
```
```
 		<t:submit />
```
```
 	</t:form>
```
```
</html>
```

Java Implementation

COPY

package net.atos.kawwaportal.components.test.pages;

import org.apache.tapestry5.annotations.Property;

```
public class Form {
```
```
	
```
```
	@Property
```
```
	private String value;
```
```
	
```
```
}
```

Top

KAWWA Markup Pattern Library

Forms

Error Field

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce