listening for xforms-invalid via JS

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

listening for xforms-invalid via JS

Aaron Reed
Hi,

I was asked to provide an example of a form listening for xforms events
in JS.  This particular form listens for xforms-invalid events to
determine in JS which controls in a group are invalid.

<?xml version="1.0" encoding="UTF-8"?>
<!-- basic FO page definition stuff -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
   <head>
     <!-- original form posted by David Landwehr on the
gmane.comp.web.xforms newsgroup on
          news.gmane.org
       -->
     <style>
       @namespace xf url("http://www.w3.org/2002/xforms");

       /* Should be pseudoelement |::value| instead of |.xf-value|,
        */
       xf|*:invalid {
         background-color: red;
       }
       .invalid {
         background-color: red;
       }
     </style>
     <title>Invalid type Testcase</title>
     <xforms:model id="theModel">
       <xforms:instance>
         <data xmlns="">
           <type>1</type>
           <type2 value="1"></type2>
         </data>

       </xforms:instance>
       <xforms:bind nodeset="type"/>
       <xforms:bind nodeset="type2" type="xsd:integer"
calculate="../type" required="true()"/>
       <xforms:bind nodeset="type2/@value" type="xsd:integer"
calculate="../../type" required="true()" readonly="true"/>
       <xforms:submission id="mySubmit" method="post"
action="http://www.xformstest.org/cgi-bin/echo.sh"/>

     </xforms:model>

     <script>
         var model = document.getElementById("theModel");
         model.addEventListener('xforms-ready', xformsReady, true);

         function xformsReady()
         {
             var group = document.getElementById("theGroup");
             group.addEventListener("xforms-invalid",
invalidElementHandler, false);

         }

         function invalidElementHandler(event)
         {
             var target = event.target;
             alert('invalid element: '+target.getAttribute("id"));
         }
     </script>

   </head>
   <body>
     <h2> Both spin boxes should turn red if value is not an integer
     </h2>
     <h3> This testcase exercises validation </h3>
     <xforms:group id="theGroup">
       <p>
         <xforms:input id="type1input" ref="type">
           <xforms:label>value of inputs:</xforms:label>
         </xforms:input>
       </p>
       <p>
         <xforms:input id="type2input" ref="type2">
           <xforms:label>This needs to be an integer:</xforms:label>
         </xforms:input>
       </p>
       <p>
         <xforms:input id="type2attributeinput" ref="type2/@value">
           <xforms:label>This needs to be an integer:</xforms:label>
         </xforms:input>
       </p>
     </xforms:group>

     <xforms:submit submission="mySubmit">
       <xforms:label>submit</xforms:label>
     </xforms:submit>

   </body>
</html>

--Aaron
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: listening for xforms-invalid via JS

Jarosław Kowalewski
Hi,
Thanks a lot for quick answer. I'm trying a script and it works fine, but
there is another problem.

That script works only for directly referenced fileds. But what with not
binded fileds in xforms. They are validate or invalidate (bind, xsd). It's
possible to get this information in JS directly in webbrowser not on the
server side?

And one another qestion. It's possible to mark repeat item as invalidate if
some fields in this structure are incorrect?  We have for a big repeat items
a special subform to add/edit it, but in main form we display only a few
fields e.g. only "Organisation name". Other fields are invisible in main
view and user must edit item to see errors.

Any suggestions?

Jarek


2010/11/17 Aaron Reed <[hidden email]>

> Hi,
>
> I was asked to provide an example of a form listening for xforms events in
> JS.  This particular form listens for xforms-invalid events to determine in
> JS which controls in a group are invalid.
>
> <?xml version="1.0" encoding="UTF-8"?>
> <!-- basic FO page definition stuff -->
> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="
> http://www.w3.org/2002/xforms"
> xmlns:ev="http://www.w3.org/2001/xml-events"
> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
> xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
>  <head>
>    <!-- original form posted by David Landwehr on the gmane.comp.web.xforms
> newsgroup on
>         news.gmane.org
>      -->
>    <style>
>      @namespace xf url("http://www.w3.org/2002/xforms");
>
>      /* Should be pseudoelement |::value| instead of |.xf-value|,
>       */
>      xf|*:invalid {
>        background-color: red;
>      }
>      .invalid {
>        background-color: red;
>      }
>    </style>
>    <title>Invalid type Testcase</title>
>    <xforms:model id="theModel">
>      <xforms:instance>
>        <data xmlns="">
>          <type>1</type>
>          <type2 value="1"></type2>
>        </data>
>
>      </xforms:instance>
>      <xforms:bind nodeset="type"/>
>      <xforms:bind nodeset="type2" type="xsd:integer" calculate="../type"
> required="true()"/>
>      <xforms:bind nodeset="type2/@value" type="xsd:integer"
> calculate="../../type" required="true()" readonly="true"/>
>      <xforms:submission id="mySubmit" method="post" action="
> http://www.xformstest.org/cgi-bin/echo.sh"/>
>
>    </xforms:model>
>
>    <script>
>        var model = document.getElementById("theModel");
>        model.addEventListener('xforms-ready', xformsReady, true);
>
>        function xformsReady()
>        {
>            var group = document.getElementById("theGroup");
>            group.addEventListener("xforms-invalid", invalidElementHandler,
> false);
>
>        }
>
>        function invalidElementHandler(event)
>        {
>            var target = event.target;
>            alert('invalid element: '+target.getAttribute("id"));
>        }
>    </script>
>
>  </head>
>  <body>
>    <h2> Both spin boxes should turn red if value is not an integer
>    </h2>
>    <h3> This testcase exercises validation </h3>
>    <xforms:group id="theGroup">
>      <p>
>        <xforms:input id="type1input" ref="type">
>          <xforms:label>value of inputs:</xforms:label>
>        </xforms:input>
>      </p>
>      <p>
>        <xforms:input id="type2input" ref="type2">
>          <xforms:label>This needs to be an integer:</xforms:label>
>        </xforms:input>
>      </p>
>      <p>
>        <xforms:input id="type2attributeinput" ref="type2/@value">
>          <xforms:label>This needs to be an integer:</xforms:label>
>        </xforms:input>
>      </p>
>    </xforms:group>
>
>    <xforms:submit submission="mySubmit">
>      <xforms:label>submit</xforms:label>
>    </xforms:submit>
>
>  </body>
> </html>
>
> --Aaron
> _______________________________________________
> dev-tech-xforms mailing list
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-xforms
>
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: listening for xforms-invalid via JS

Aaron Reed
In reply to this post by Aaron Reed
Hi Jarek,

According to the spec (http://www.w3.org/TR/xforms11/#evt-invalid)
xforms-invalid events are sent to xforms controls when they become
invalid.  So however you assign a type to an instance node, any control
bound to that node will be sent a xforms-invalid event whenever the data
in that node is invalid.

If what you want to know is when a DATA NODE is invalid, xforms doesn't
have an event for that so I don't know how you could know that using JS.
  I think server side processing would be your best bet.

As I mentioned before, the control is marked invalid if that node it is
bound to contains invalid data.  This is reflected in the UI by CSS
using the :invalid pseudo-class.  I don't know CSS that well, but if
there is a way to style the repeat item matching against a invalid
child, that would be the way to do that.  "xforms|repeat
.xf-repeat-item" is the selector to use for a repeat item.  If there
isn't a way, you could always listen for the xforms-invalid using JS on
the repeat item and if a contained control is marked invalid you'll know
about it.  When this happens you could apply a class to the repeat item
node, for example, and have a CSS style set up for that case to mark it
red or whatever.  However, I can't remember if non-relevant controls get
tested for validity or not.  That might be worth checking in the spec.

I hope that this helps,
--Aaron

Jarosław Kowalewski wrote:

> Hi,
> Thanks a lot for quick answer. I'm trying a script and it works fine, but
> there is another problem.
>
> That script works only for directly referenced fileds. But what with not
> binded fileds in xforms. They are validate or invalidate (bind, xsd). It's
> possible to get this information in JS directly in webbrowser not on the
> server side?
>
> And one another qestion. It's possible to mark repeat item as invalidate if
> some fields in this structure are incorrect?  We have for a big repeat items
> a special subform to add/edit it, but in main form we display only a few
> fields e.g. only "Organisation name". Other fields are invisible in main
> view and user must edit item to see errors.
>
> Any suggestions?
>
> Jarek
>
>
> 2010/11/17 Aaron Reed<[hidden email]>
>
>> Hi,
>>
>> I was asked to provide an example of a form listening for xforms events in
>> JS.  This particular form listens for xforms-invalid events to determine in
>> JS which controls in a group are invalid.
>>
>> <?xml version="1.0" encoding="UTF-8"?>
>> <!-- basic FO page definition stuff -->
>> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="
>> http://www.w3.org/2002/xforms"
>> xmlns:ev="http://www.w3.org/2001/xml-events"
>> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>> xmlns:xsd="http://www.w3.org/2001/XMLSchema">
>>   <head>
>>     <!-- original form posted by David Landwehr on the gmane.comp.web.xforms
>> newsgroup on
>>          news.gmane.org
>>       -->
>>     <style>
>>       @namespace xf url("http://www.w3.org/2002/xforms");
>>
>>       /* Should be pseudoelement |::value| instead of |.xf-value|,
>>        */
>>       xf|*:invalid {
>>         background-color: red;
>>       }
>>       .invalid {
>>         background-color: red;
>>       }
>>     </style>
>>     <title>Invalid type Testcase</title>
>>     <xforms:model id="theModel">
>>       <xforms:instance>
>>         <data xmlns="">
>>           <type>1</type>
>>           <type2 value="1"></type2>
>>         </data>
>>
>>       </xforms:instance>
>>       <xforms:bind nodeset="type"/>
>>       <xforms:bind nodeset="type2" type="xsd:integer" calculate="../type"
>> required="true()"/>
>>       <xforms:bind nodeset="type2/@value" type="xsd:integer"
>> calculate="../../type" required="true()" readonly="true"/>
>>       <xforms:submission id="mySubmit" method="post" action="
>> http://www.xformstest.org/cgi-bin/echo.sh"/>
>>
>>     </xforms:model>
>>
>>     <script>
>>         var model = document.getElementById("theModel");
>>         model.addEventListener('xforms-ready', xformsReady, true);
>>
>>         function xformsReady()
>>         {
>>             var group = document.getElementById("theGroup");
>>             group.addEventListener("xforms-invalid", invalidElementHandler,
>> false);
>>
>>         }
>>
>>         function invalidElementHandler(event)
>>         {
>>             var target = event.target;
>>             alert('invalid element: '+target.getAttribute("id"));
>>         }
>>     </script>
>>
>>   </head>
>>   <body>
>>     <h2>  Both spin boxes should turn red if value is not an integer
>>     </h2>
>>     <h3>  This testcase exercises validation</h3>
>>     <xforms:group id="theGroup">
>>       <p>
>>         <xforms:input id="type1input" ref="type">
>>           <xforms:label>value of inputs:</xforms:label>
>>         </xforms:input>
>>       </p>
>>       <p>
>>         <xforms:input id="type2input" ref="type2">
>>           <xforms:label>This needs to be an integer:</xforms:label>
>>         </xforms:input>
>>       </p>
>>       <p>
>>         <xforms:input id="type2attributeinput" ref="type2/@value">
>>           <xforms:label>This needs to be an integer:</xforms:label>
>>         </xforms:input>
>>       </p>
>>     </xforms:group>
>>
>>     <xforms:submit submission="mySubmit">
>>       <xforms:label>submit</xforms:label>
>>     </xforms:submit>
>>
>>   </body>
>> </html>
>>
>> --Aaron
>> _______________________________________________
>> dev-tech-xforms mailing list
>> [hidden email]
>> https://lists.mozilla.org/listinfo/dev-tech-xforms
>>

_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Loading...