KAWWA Markup Pattern Library


Forms

Mandatory Info Component Information

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

Add to list

Message about mandatory fields.

Fields marked by an Asterisk are mandatory

HTML5 Plain Code

COPY
  1. <p class="k-mandatory">Fields marked by an <img src="../img/k-theme0/bg_required.svg" alt="Asterisk" /> are mandatory</p>

CSS Code

COPY
  1. p.k-mandatory {
  2. 	clear: both;
  3. 	font: 0.8em open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  4. 	text-align: right;
  5. 	color: #000;
  6. 	background: transparent;
  7. 	padding-right: 5px;
  8. 	margin-bottom: 1em;
  9. }
  10. 
                                

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

If one of your input have the required validator, the Kawwa library will add the introduction message (in the XHTML sample : "Fields marked by an ... are mandatory").

You can change the message by adding the kawwaMandatoryMessage parameter to the form component : t:kawwaMandatoryMessage="message:mandatory-field"

If you don't want to see this message on a particular Form, you can set the disableKawwaMandatory parameter to true.

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.  		Because the following textfield is required, the default message will be displayed.
  5.  		<t:textfield t:id="value" t:validate="required"/><br />
  6.  		<t:submit />
  7.  	</t:form>
  8. 
                                
  9. 	
  10. 	<t:form t:clientValidation="false" t:id="form" t:kawwaMandatoryMessage="message:mandatory-field">
  11.  		Tapestry will expect to find a "mandatory-field" key in your .properties files. (the page specific or the global catalogue) and will display it.
  12. 		The value you specify for the key will be formated : '%s' caracter will automatically be replaced by the symbol configured to identify mandatory fields (* by default)
  13. 		This means your key may look like this: mandatory-field=Fields marked by %s are mandatory
  14. 		If you want to change the default * symbol, you can override the KawwaConstants.MANDATORY_FIELD_IMAGE symbol in your AppModule.
  15. 		But keep in mind that the final symbol used in textfields is also defined in the CSS file (checkout Form > Required field section for more information).
  16.  		<t:textfield t:id="value3" t:validate="required"/><br />
  17.  		<t:submit />
  18.  	</t:form>
  19. 	 
  20. 		
  21. 	<t:form t:clientValidation="false" t:id="form" t:disableKawwaMandatory="false">
  22. 		The mandatory information won't be displayed.
  23. 		<t:textfield t:id="value2" t:validate="required"/><br />
  24. 		<t:submit />
  25. 	</t:form>
  26. </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, value2, value3;
  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