widget:field

Purpose

A reference in a Multiple Forms Validator widget to a single XForm control that is validated as part of the group.

Note:

The pseudo-class :mcs-invalid specifies all style changes that are applied after validation has failed.

Contained by

Attribute groups

Attribute

Attribute Description Type Default Options Use
ref Reference to a control xs:string     required 

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:xforms="http://www.w3.org/2002/xforms"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si">
  <head>
    <title>widget:multiple-validator</title>
    <xforms:model>
      <xforms:instance>
        <si:instance>
          <si:item name="name"/>
          <si:item name="pin"/>
        </si:instance>
      </xforms:instance>
      <xforms:submission id="submit" action="."/>
    </xforms:model>
    <widget:script id="validate-script">
      $W('myValidator').addSuccessCallback(function(){
        $W('formMsgSuccess').setContent("Validation succeeded.")});
      $W('myValidator').addFailureCallback(function(){
        $W('formMsgSuccess').setContent("Validation failed.")});
      $W('myValidator').validate() 
    </widget:script>
  </head>
  <body>
    <div>
      <widget:display id="formMsgSuccess"/>
    </div>
    <div>
      <xforms:input ref="name" id="name">
        <xforms:label>Name</xforms:label>
      </xforms:input>
      <xforms:input ref="pin" id="pin">
        <xforms:label>PIN</xforms:label>
      </xforms:input>
      <widget:button id="formButton" action="validate-script#invoke">Validate</widget:button>
      <widget:multiple-validator id="myValidator">
        <widget:field ref="name"/>
        <widget:field ref="pin"/>
        <widget:validate message-area="formMessage"
          src="http://localhost:8080/mcs/projects/client-app/service/validator"/>
      </widget:multiple-validator>
    </div>
  </body>
</html>

Related topics