Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-label-hint-help-alert.xml

Created February 11, 2014 02:03
Show Gist options
  • Save dmccreary/8927998 to your computer and use it in GitHub Desktop.
Save dmccreary/8927998 to your computer and use it in GitHub Desktop.
Download ZIP
XForms labels, hints, help and alert elements within a form
Raw
xforms-label-hint-help-alert.xml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
<head>
<title>XForms Label, Hint, Help and Alerts</title>
<xf:model>
<xf:instance xmlns="">
<data>
<myNumber1>-1.234</myNumber1>
<myNumber2>101</myNumber2>
</data>
</xf:instance>
<xf:bind id="positive" ref="*" constraint="xs:decimal(.) gt 0"/>
<xf:bind id="under100" ref="*" constraint="xs:decimal(.) le 100"/>
</xf:model>
<style type="text/css">
.my-form {background-color:linen;}
.xforms-control {display:block;padding:5px;}
.xforms-control .xforms-label {display:inline-block; width:19ex; text-align:right; font-weight:bold;}
.orbeon .xforms-alert.xforms-active {display: inline-block!important; width: 250px; padding: 2px;}
</style>
</head>
<body>
<div class="my-form span6">
<xf:input ref="myNumber1">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
<xf:input ref="myNumber2">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment