KAWWA Markup Pattern Library


Forms

Required field Component Information

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

Add to list

Adds a visual aid to indicate mandatory fields.

Note that you must also provide a textual sign to the labels in order to allow users that consult your pages without style-sheet to be aware of those fields.

HTML5 Plain Code

COPY
  1. <p><label for="field1">* Enter something:</label>
  2. 	<input type="text" id="field1" name="field1" required /></p>

CSS Code

COPY
  1. input[required], textarea[required], .k-required {
  2. 	background: #FFF url(../img/k-theme0/bg_required.svg) 0.2em 0.3em no-repeat;
  3. 	padding-left: 1.2em;
  4. }
  5. 
                                

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 will have the required validator, the Kawwa library will add automatically the k-required class to the input.

For the Radio and Checkbox Inputs, the k-required CSS class should be added to the legend element of the fieldset, wrapping your radios. You have to specify this CSS class by yourself. For doing that, you should innject your component in the Java Class, and use the isRequired() 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:textfield t:id="value" t:validate="required"/><br />
  6.  		
  7.  		<t:submit />
  8.  	</t:form>
  9. </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