|
Hi,
I have some problems/questions following the changed forms implementation in 4.1.2. See my code below.
Click on the Login button (=Submit).
1. Why is the form invalid message not displayed?
2. Why are the form-field invalid messages not displayed?
2. Why are the Datum, Land and Spin fields not invalid?
3. What schema can I use if, for example, I want to check for a valid date, at least a month from now.
4. Are all the xi:includes necessary?
Thanks!!
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Tri-ennium Servicepuntmodules </title>
<script src="/Backbase/Backbase_4_1_2/engine/boot.js" type="text/javascript">//</script>
</head>
<body>
<div>
<script type="text/backbase+xml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:sp="http://www.triennium.com/servicepunt"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:d="http://www.backbase.com/2006/tdl"
xmlns:smil="http://www.w3.org/2005/SMIL21"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:bf="http://www.backbase.com/2007/forms"
>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/config.xml" />
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.1999.xhtml/formsProfile.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/formsProfile.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.2001.XMLSchema/schemaSimpleTypes.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/validation/extraSimpleTypes.xml" />
<xi:include href="/trienniumSimpleTypes.xml?__toolbar=0"/>
<d:tdl>
<d:namespace name="http://www.backbase.com/2007/forms">
<d:uses element="inputBase"
src="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2007.forms/forms/formsBase.xml" />
<d:element name="inputBase" abstract="true" extends="bf:inputBase">
<d:handler event="change" type="text/javascript">
this.validate();
</d:handler>
<d:handler event="valid">
<smil:animate attributeName="background-color" dur="500ms" to="#ffffff" />
</d:handler>
<d:handler event="invalid">
<smil:animate attributeName="background-color" dur="500ms" to="#ffbbbb" />
</d:handler>
</d:element>
</d:namespace>
</d:tdl>
<h1>Forms</h1>
<form action="succes.xml" bf:destination="id('listwrapper')" id="frm" bf:messagesRef="id('frm-messages')">
<div>
<bf:messages id="frm-messages">
<bf:message event="invalid">Fout in het formulier</bf:message>
</bf:messages>
</div>
Username <input type="text" name="username" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages"/>
<bf:messages>
<bf:message event="invalid" facet="required">Geen username ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldige username</bf:message>
</bf:messages>
<br/>
Huisnummer <input type="text" name="huisnummer" bf:required="true" bf:dataType="sp:huisnummer" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen huisnummer ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig huisnummer</bf:message>
</bf:messages>
<br/>
Datum <b:calendar format="d-M-yyyy" opacity="0.8" name="datum" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen datum ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldige datum</bf:message>
</bf:messages>
<br/>
Land
<b:comboBox filter="true" name="land" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages" >
<b:comboBoxOption>Afghanistan</b:comboBoxOption>
<b:comboBoxOption>Albania</b:comboBoxOption>
<b:comboBoxOption>Algeria</b:comboBoxOption>
<b:comboBoxOption>American Samoa</b:comboBoxOption>
<b:comboBoxOption>Andorra</b:comboBoxOption>
<b:comboBoxOption>Angola</b:comboBoxOption>
<b:comboBoxOption>Anguilla</b:comboBoxOption>
<b:comboBoxOption>Antigua and Barbuda</b:comboBoxOption>
<b:comboBoxOption>Argentina</b:comboBoxOption>
<b:comboBoxOption>Armenia</b:comboBoxOption>
<b:comboBoxOption>Aruba</b:comboBoxOption>
<b:comboBoxOption>Ascension Island</b:comboBoxOption>
<b:comboBoxOption>Australia</b:comboBoxOption>
<b:comboBoxOption>Australian External Territories</b:comboBoxOption>
<b:comboBoxOption>Austria</b:comboBoxOption>
<b:comboBoxOption>Azerbaijan</b:comboBoxOption>
</b:comboBox>
<bf:messages>
<bf:message event="invalid" facet="required">Geen land ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig land</bf:message>
</bf:messages>
<br/>
Aantal <b:slider name="aantal" bf:required="true" bf:dataType="sp:spin" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen aantal ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig aantal</bf:message>
</bf:messages>
<br/>
Spin <b:spinner name="spin" bf:required="true" bf:dataType="sp:spin" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen aantal ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig aantal</bf:message>
</bf:messages>
<br/>
<input type="submit" value="Login"/>
</form>
<div id="listwrapper"></div>
</script>
</div>
</body>
</html>
<head>
<title> Tri-ennium Servicepuntmodules </title>
<script src="/Backbase/Backbase_4_1_2/engine/boot.js" type="text/javascript">//</script>
</head>
<body>
<div>
<script type="text/backbase+xml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:sp="http://www.triennium.com/servicepunt"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:d="http://www.backbase.com/2006/tdl"
xmlns:smil="http://www.w3.org/2005/SMIL21"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:bf="http://www.backbase.com/2007/forms"
>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/config.xml" />
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.1999.xhtml/formsProfile.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/formsProfile.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.2001.XMLSchema/schemaSimpleTypes.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/validation/extraSimpleTypes.xml" />
<xi:include href="/trienniumSimpleTypes.xml?__toolbar=0"/>
<d:tdl>
<d:namespace name="http://www.backbase.com/2007/forms">
<d:uses element="inputBase"
src="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2007.forms/forms/formsBase.xml" />
<d:element name="inputBase" abstract="true" extends="bf:inputBase">
<d:handler event="change" type="text/javascript">
this.validate();
</d:handler>
<d:handler event="valid">
<smil:animate attributeName="background-color" dur="500ms" to="#ffffff" />
</d:handler>
<d:handler event="invalid">
<smil:animate attributeName="background-color" dur="500ms" to="#ffbbbb" />
</d:handler>
</d:element>
</d:namespace>
</d:tdl>
<h1>Forms</h1>
<form action="succes.xml" bf:destination="id('listwrapper')" id="frm" bf:messagesRef="id('frm-messages')">
<div>
<bf:messages id="frm-messages">
<bf:message event="invalid">Fout in het formulier</bf:message>
</bf:messages>
</div>
Username <input type="text" name="username" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages"/>
<bf:messages>
<bf:message event="invalid" facet="required">Geen username ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldige username</bf:message>
</bf:messages>
<br/>
Huisnummer <input type="text" name="huisnummer" bf:required="true" bf:dataType="sp:huisnummer" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen huisnummer ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig huisnummer</bf:message>
</bf:messages>
<br/>
Datum <b:calendar format="d-M-yyyy" opacity="0.8" name="datum" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen datum ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldige datum</bf:message>
</bf:messages>
<br/>
Land
<b:comboBox filter="true" name="land" bf:required="true" bf:dataType="xs:string" bf:messagesRef="following-sibling::b:messages" >
<b:comboBoxOption>Afghanistan</b:comboBoxOption>
<b:comboBoxOption>Albania</b:comboBoxOption>
<b:comboBoxOption>Algeria</b:comboBoxOption>
<b:comboBoxOption>American Samoa</b:comboBoxOption>
<b:comboBoxOption>Andorra</b:comboBoxOption>
<b:comboBoxOption>Angola</b:comboBoxOption>
<b:comboBoxOption>Anguilla</b:comboBoxOption>
<b:comboBoxOption>Antigua and Barbuda</b:comboBoxOption>
<b:comboBoxOption>Argentina</b:comboBoxOption>
<b:comboBoxOption>Armenia</b:comboBoxOption>
<b:comboBoxOption>Aruba</b:comboBoxOption>
<b:comboBoxOption>Ascension Island</b:comboBoxOption>
<b:comboBoxOption>Australia</b:comboBoxOption>
<b:comboBoxOption>Australian External Territories</b:comboBoxOption>
<b:comboBoxOption>Austria</b:comboBoxOption>
<b:comboBoxOption>Azerbaijan</b:comboBoxOption>
</b:comboBox>
<bf:messages>
<bf:message event="invalid" facet="required">Geen land ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig land</bf:message>
</bf:messages>
<br/>
Aantal <b:slider name="aantal" bf:required="true" bf:dataType="sp:spin" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen aantal ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig aantal</bf:message>
</bf:messages>
<br/>
Spin <b:spinner name="spin" bf:required="true" bf:dataType="sp:spin" bf:messagesRef="following-sibling::b:messages" />
<bf:messages>
<bf:message event="invalid" facet="required">Geen aantal ingevoerd</bf:message>
<bf:message event="invalid" facet="schema">Geen geldig aantal</bf:message>
</bf:messages>
<br/>
<input type="submit" value="Login"/>
</form>
<div id="listwrapper"></div>
</script>
</div>
</body>
</html>
trienniumSimpleTypes.xml
<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.triennium.com/servicepunt">
<simpleType name="huisnummer">
<restriction base="token">
<pattern value="\d"/>
</restriction>
</simpleType>
<simpleType name="spin">
<restriction base="xs:nonNegativeInteger">
<minInclusive value="10"/>
</restriction>
</simpleType>
</schema>
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.triennium.com/servicepunt">
<simpleType name="huisnummer">
<restriction base="token">
<pattern value="\d"/>
</restriction>
</simpleType>
<simpleType name="spin">
<restriction base="xs:nonNegativeInteger">
<minInclusive value="10"/>
</restriction>
</simpleType>
</schema>
Forms in 4.1.2
7 January, 2008 - 13:04 — yudiHi Paul Kok,
I have recreated your application and test it. These are the following questions you asked:
1. Why is the form invalid message not displayed?
You should put div between the text
<bf:message event="invalid"><div>Fout in het formulier</div></bf:message>2. Why are the form-field invalid messages not displayed?
You should put div between the text and bf:messagesRef="following-sibling::bf:messages" not bf:messagesRef="following-sibling::b:messages"
3. Why are the Datum, Land and Spin fields not invalid?
It validates the datum, land and spin but I think there is a problem with applying the invalid color on those btl widgets.For b:comboBox, it can be changed with select option ( the color validation works with select option)
<option value=""></option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
4. What schema can I use if, for example, I want to check for a valid date, at least a month from now.
I think it is better to use a behaviour than a schema.You can define your own rule inside the behaviour to match only the date at least a month from now. You can have a look on Backbase Form demo to see how the calendar validation works.
5. Are all the xi:includes necessary?
schemaSimpleTypes.xml and extraSimpleTypes.xml are necessary to validate all the inputs.formsProfile.xml is not necessary so it can be removed
Thanks a lot~! I will try
7 January, 2008 - 16:51 — paulkokThanks a lot~! I will try this tomorrow.
Paul Kok
Tri-ennium
Hi, I've been working on a
31 January, 2008 - 14:49 — paulkokHi,
I've been working on a generic form-handler based on the Backbase Rich Forms Demo. The differende is: i call the tabs 'Steps', I don't use a summary and I want that the user can't go to a next step if the current one is not valid. I still have some issues I hope you can help:
1. The general bf:messages (id="frm-messages") for the form is not displayed. Also, I want to show it on later steps not not only the first step.
2. If I go to the next step, inputs on step 2 are displayed invalid, but they should be 'virgin', so no invalid style. I can't figure out why this happens it's not like that in your demo.
This is the code (sorry, but it became a very large document ;) ...)
Thanks.
Paul Kok
Tri-ennium
<head>
<title> Tri-ennium Servicepuntmodules </title>
<script src="/Backbase/Backbase_4_1_2/engine/boot.js" type="text/javascript">//</script>
<style media="screen" type="text/css">
.error-tooltip {
border: 1px solid #FF0000;
background-color: #FFFFFF;
padding: 4px;
opacity: 0.8;
filter:alpha(opacity=80);
-moz-opacity:.80;
z-index: 100;
}
.errormessage {
color: #FF0000;
}
form .errormessage {
display: none;
}
</style>
</head>
<body>
<div>
<script type="text/backbase+xml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:sp="http://www.triennium.com/servicepunt"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:d="http://www.backbase.com/2006/tdl"
xmlns:smil="http://www.w3.org/2005/SMIL21"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:bf="http://www.backbase.com/2007/forms"
>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/config.xml" />
<!--<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.1999.xhtml/formsProfile.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/formsProfile.xml"/>-->
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.w3.org.2001.XMLSchema/schemaSimpleTypes.xml"/>
<xi:include href="/Backbase/Backbase_4_1_2/bindings/www.backbase.com.2006.btl/validation/extraSimpleTypes.xml" />
<xi:include href="/trienniumSimpleTypes.xml?__toolbar=0"/>
<d:tdl>
<d:namespace name="http://www.triennium.com/servicepunt">
<d:behavior name="formField">
<d:property name="valid" />
<d:property name="virgin" /> <!-- denotes whether field has been changed before -->
<d:handler event="DOMNodeInsertedIntoDocument" type="application/javascript">
bb.setProperty(this, 'valid', false);
bb.setProperty(this, 'virgin', true);
</d:handler>
<d:handler event="blur" type="application/javascript">
bb.setProperty(this, 'virgin', false);
this.validate();
</d:handler>
<d:handler event="keyup" type="application/javascript">
if(!bb.getProperty(this, 'virgin'))
this.validate();
</d:handler>
<d:handler event="change" type="text/javascript">
this.validate();
</d:handler>
<d:handler event="valid" type="application/javascript">
bb.setProperty(this, 'valid', true);
var oFormFieldError = document.getElementById('formFieldError');
oFormFieldError.style.display = 'none';
</d:handler>
<d:handler event="invalid" type="application/javascript">
<![CDATA[
bb.setProperty(this, 'valid', false);
bb.setProperty(this, 'virgin', false);
var oFormFieldError = document.getElementById('formFieldError');
var sErrorText = this.selectSingleNode(this.getAttribute('bf:messagesRef')).viewNode.innerHTML;
if(sErrorText)
oFormFieldError.innerHTML = sErrorText;
else
oFormFieldError.innerHTML = 'Verplicht veld';
]]>
</d:handler>
<d:handler event="mouseenter" type="application/javascript">
<![CDATA[
var oFormFieldError = document.getElementById('formFieldError');
var sErrorText = this.selectSingleNode(this.getAttribute('bf:messagesRef')).viewNode.innerHTML;
if(sErrorText)
oFormFieldError.innerHTML = sErrorText;
else
oFormFieldError.innerHTML = 'Verplicht veld';
if(!bb.getProperty(this, 'valid') && !bb.getProperty(this, 'virgin')) {
oFormFieldError.style.display = 'block';
oFormFieldError.style.top = event.clientY + document.documentElement.scrollTop + 'px';
oFormFieldError.style.left = event.clientX + 'px';
}
]]>
</d:handler>
<d:handler event="mousemove" type="application/javascript">
var oFormFieldError = document.getElementById('formFieldError');
var iOffset = 5;
oFormFieldError.style.top = event.clientY + iOffset + document.documentElement.scrollTop +'px';
oFormFieldError.style.left = event.clientX + iOffset + 'px';
</d:handler>
<d:handler event="mouseleave" type="application/javascript">
var oFormFieldError = document.getElementById('formFieldError');
oFormFieldError.style.display = 'none';
</d:handler>
</d:behavior>
<d:element name="formSteps">
<d:property name="steps"/>
<d:property name="selectedIndex"/>
<d:property name="allStepsValid"/>
<d:template type="application/xhtml+xml">
<div class="formSteps">
<d:content />
</div>
</d:template>
<d:handler event="DOMNodeInsertedIntoDocument" type="application/javascript">
<![CDATA[
var aSteps = this.selectNodes("sp:formStep");
bb.setProperty(this, 'steps', aSteps);
var bSelected;
for (var i=0; i<aSteps.length; i++) {
var oStep = aSteps[i];
if(oStep.getAttribute('selected') == 'true') {
oStep.select();
bSelected = true;
}
}
if(aSteps.length > 0 && !bSelected)
aSteps[0].select();
]]>
</d:handler>
<d:handler event="tabSelected" type="application/javascript">
<![CDATA[
this.checkAllStepsValid();
/* TODO ??????????
this.onAllTabsValid();*/
// Deselect all tabs not the currently selected one
var oCurrentStep = event.origin;
var aSteps = bb.getProperty(this, 'steps');
for (var i=0; i<aSteps.length; i++) {
if(aSteps[i] != oCurrentStep) {
aSteps[i].deselect();
}
}
var iCurrentStepIndex = bb.getProperty(oCurrentStep, 'index');
bb.setProperty(this, 'selectedIndex', iCurrentStepIndex);
]]>
</d:handler>
<d:method name="checkAllStepsValid">
<d:body type="application/javascript"><![CDATA[
var aSteps = bb.getProperty(this, 'steps');
for(var i = 0; i < aSteps.length; i++){
if(!bb.getProperty(aSteps[i], 'valid')){
bb.setProperty(this, 'allStepsValid', false);
return;
}
}
bb.setProperty(this, 'allStepsValid', true);
]]>
</d:body>
</d:method>
<d:method name="nextStep">
<d:body type="application/javascript">
var oThis = this.selectSingleNode(".//sp:formStep[property::selected]");
// Check if step is valid
oThis.checkValidState();
bValid = bb.getProperty(oThis, 'valid');
// When step is valid, proceed
if(bValid) {
var oNext = this.selectSingleNode(".//sp:formStep[property::selected]/following-sibling::sp:formStep[1]");
if(oNext)
oNext.select();
}
</d:body>
</d:method>
<d:method name="previousStep">
<d:body type="application/javascript">