Live validation of an object form field (list)

Help / Discuss
1

Hello,
I’m having trouble getting live validation to work. I think I’m not specifying the form field correctly. I had assumed it was the same as $prop.getName(). But that doesn’t seem to work.

Any suggestions for the dummy code below?

{{velocity}}
$xwiki.jsfx.use('uicomponents/widgets/validation/livevalidation_prototype.js')
$xwiki.ssfx.use('uicomponents/widgets/validation/livevalidation.css')
{{html wiki="true"}}
(% class="xform" %)
(((
#set($class = $doc.getObject('Content Manager.Code.Content ManagerClass').xWikiClass)
#foreach($prop in $class.properties)
  #if ($xcontext.action != 'edit' && $prop.prettyName.toLowerCase().contains("content"))
    : $doc.display($prop.getName())
  #elseif ($xcontext.action == 'edit')
    ; $prop.prettyName $doc.displayTooltip($prop)
    : $doc.display($prop.getName())
  #end
#end
)))
{{/html}}
{{/velocity}}

{{html}}
<script type="text/javascript">
/* <![CDATA[ */
document.observe('dom:loaded', function() {
var aField = new LiveValidation( 'aFieldName' , { validMessage: "Hi There.", wait: 500} );
aField.add( Validate.Presence, { failureMessage: "Say Something, anything..."} );
aField.add( Validate.Format, { pattern: /^[Hh]ello$/, failureMessage: "How about saying 'Hello'?"} );
});
// ]]>
</script>
{{/html}}
2

Inspect the DOM/HTML of your form (using the browser’s developer tools) and look for the id of the form field that needs live validation. Use that id instead of “aFieldName” in the JavaScript code. For a xclass property the form field id looks like “Content Manager.Code.Content ManagerClass_0_aPropName”.

Hope this helps,
Marius

3

Thanks Marius,

While we’re on the subject, can you point me to any good documentation/examples of livevalidation on the net? I’ve been trying to implement “Custom” validation but can’t figure out how to get it to recognise a groovy or velocity function. This is the only documentation I can find.

#set($validationObject = $xwiki.parseGroovyFromPage("Content Manager.Code.Content Manager LiveValidation"))
$validationObject.setObjects($doc, $xcontext)

and then,

aField.add( Validate.Custom, { against=$validationObject.validateDocument(), failureMessage:'fail'} );

Where validateDocument() is a groovy method in another page

4

The live validation happens in the browser using JavaScript while the Velocity and Groovy scripts are evaluated on the server side before the page is loaded in the browser. The JavaScript cannot call directly a Velocity/Groovy “function”. The JavaScript can only make an asynchronous HTTP request to the server to “call” the Velocity/Groovy page indirectly. The simplest is to write the validation in JavaScript.