[ KAWWA PORTAL ] Components : Error Messages

Forms

Error Messages

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

Add to list

After form validation, this block appears in the begining of the form, listing all errors found during validation.

Demo
Snippets
Tapestry Integration

Form Error

The following fields present an error:

Error field 1: A comment about the error

HTML5 Plain Code

COPY

```
<div class="k-error-messages">
```
```
	<h3>Form Error</h3>
```

	<p>The following fields present an error:</p>

```
	<ul>
```

		<li id="error1" aria-controls="field1">Error field 1: A comment about the error</li>

```
	</ul>
```
```
</div>
```
```
<form>
```

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

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

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

```
</form>
```

CSS Code

COPY

```
div.k-error-messages {
```
```
	clear: both;
```
```
	text-align: center;
```
```
	color: #C00;
```

	background: #FFF url(../img/k-theme0/bg_error_message.png);

```
	padding: 10px;
```
```
	margin-bottom: 2em;
```
```
}
```
```
	div.k-error-messages h3 {
```
```
		color: #C00;
```
```
		background: rgba(243,214,214,.5);
```
```
  		margin: 0 10px 21px;
```
```
		border-color: #C00;
```
```
	}
```

	div.k-error-messages h3:before {content: "\26A0 \00A0 ";}

	div.k-error-messages li {list-style-position: inside;}

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 Errors components, available in the Tapestry Component Library.

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:errors />
```
```
 		
```

 		<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 Messages

Form Error

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