widget:validate

Purpose

Enables form validation in both the Simple and Multiple Forms Validator widgets.

For simple validation, the element is a child of the xforms:input element, and the contained widget:message element may be used. For multiple validation either a global message, or control-specific messages are provided server-side.

Failed validation messages are displayed either in a Popup widget instance identified by the message-popup attribute, or in a form element. In either case, the content of element referred to in the message-area attribute will be replaced with the message content. When validation passes, the content will be cleared.

If the message-area attribute is not specified with a related message-popup attribute, or if it is specified but does not refer to a content element within a popup, the popup will be displayed with its static content. If the message-area attribute is not specified for a form element and the mcs-validation-error-action style property contains 'message', the message text will be displayed in the browser message dialog.

Note:

If you have more than one validator on the same page, you should not set the mcs-validation-error-action property to 'focus' in conjunction with an auto attribute value of 'yes', as it may lead to an infinite loop of focus and blur events.

Contained by

Contains

Attribute groups

Attributes

Attribute Description Type Default Options Use
auto Controls whether or not validation is performed automatically after the user moves focus from the input control xs:string yes  yes, no  optional 
message-area Refers to a form or Popup widget element that is responsible for displaying messages xs:string     optional 
message-popup Refers to the Popup widget instance that will be shown when validation fails. xs:string     optional 
src The URL of a page that handles multiple forms validation. No validation will occur if the attribute is not specified. It is an error to specify it for the Simple Forms Validator widget. xs:string     optional 

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:validate</title>
    <style type="text/css">
      #name {
        mcs-validation-error-action: message;
        mcs-input-format: 'M:Xxxx*x';
      }
      #pin {
        mcs-validation-error-action: message;
        mcs-input-format: 'N:######';
      }
    </style>
    <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>
  </head>
  <body>
    <p>
      <xforms:input ref="name" id="name">
        <xforms:label>Name</xforms:label>
        <widget:validate message-area="formMessage1">
          <widget:message type="empty">The name cannot be empty! </widget:message>
          <widget:message type="invalid">The name must be at least 4 characters and start with an
            uppercase character!</widget:message>
        </widget:validate>
      </xforms:input>
      <span id="formMessage1"/>
    </p>
    <p>
      <xforms:input ref="pin" id="pin">
        <xforms:label>PIN</xforms:label>
        <widget:validate message-area="formMessage2">
          <widget:message type="empty">PIN cannot be empty!</widget:message>
          <widget:message type="invalid">PIN must consist of 6 digits!</widget:message>
        </widget:validate>
      </xforms:input>
      <span id="formMessage2"/>
    </p>
  </body>
</html>

Related topics