KAWWA Markup Pattern Library


Forms

Error Messages Component Information

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

Add to list

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

Form Error

The following fields present an error:

  • Error field 1: A comment about the error

A comment about the error

HTML5 Plain Code

COPY
  1. <div class="k-error-messages">
  2. 	<h3>Form Error</h3>
  3. 	<p>The following fields present an error:</p>
  4. 	<ul>
  5. 		<li id="error1" aria-controls="field1">Error field 1: A comment about the error</li>
  6. 	</ul>
  7. </div>
  8. 
                                
  9. <form>
  10. 	<p><label for="field1">Enter something:</label>
  11. 		<input class="k-field-error" type="text" id="field1" name="field1" aria-describedby="error1" aria-invalid="true"/>
  12. 		<span class="k-contextual-error">A comment about the error</span></p>
  13. </form>

CSS Code

COPY
  1. div.k-error-messages {
  2. 	clear: both;
  3. 	text-align: center;
  4. 	color: #C00;
  5. 	background: #FFF url(../img/k-theme0/bg_error_message.png);
  6. 	padding: 10px;
  7. 	margin-bottom: 2em;
  8. }
  9. 	div.k-error-messages h3 {
  10. 		color: #C00;
  11. 		background: rgba(243,214,214,.5);
  12.   		margin: 0 10px 21px;
  13. 		border-color: #C00;
  14. 	}
  15. 	div.k-error-messages h3:before {content: "\26A0 \00A0 ";}
  16. 	div.k-error-messages li {list-style-position: inside;}
  17. 
                                
  18. 
                                

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
  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:errors />
  6.  		
  7.  		<t:textfield t:id="value" t:validate="required"/><br />
  8.  		
  9.  		<t:submit />
  10.  	</t:form>
  11. </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