antun
09-17-2003, 10:22 AM
Here's an easy way of validating a form on the client in Laszlo. First we create a custom text field component with a gray background, that has the ability to turn red on command. We also give it a required attribute, based on which it registers itself with an instance of a formvalidator class (that we also need to write). The formvalidator class is just an abstract object that adds fields to a list of fields to check. Then when its validate() method is called, it loops through them and calls their color-changing method if they are empty (as well as returning false).
<canvas debug="true">
<debug x="150" />
<!-- Text field with a black border -->
<class name="mytextfield" width="140" height="16" bgcolor="0x7E7E7E">
<attribute name="required" value="false" />
<attribute name="errorColor" type="number" value="0xff0000" />
<attribute name="validator" value="null" />
<inputtext name="textField" width="${parent.width-2}" align="center"
height="${parent.height-2}" valign="middle"
bgcolor="white" />
<method event="oninit">
if ( this.required ) {
this.validator.addField( this );
}
this.originalBackgroundColor = this.bgcolor;
</method>
<method name="getText">
return this.textField.getText();
</method>
<!-- Highlight the border of the field the specified error color -->
<method name="showError">
this.setAttribute( 'bgcolor', this.errorColor );
</method>
<!-- Return the background color of the field to show it's
filled out -->
<method name="showOK">
this.setAttribute( 'bgcolor', this.originalBackgroundColor );
</method>
</class>
<!-- Abstract validator that checks required fields -->
<class name="formvalidator" extends="node">
<method event="oninit">
this.fieldsToCheck = new array();
</method>
<!-- Register a field to be checked by this at a later time -->
<method name="addField" args="f">
this.fieldsToCheck.push( f );
</method>
<!-- Check all registered fields -->
<method name="validate">
<![CDATA[
var isValid = true;
for ( var i=0; i<;this.fieldsToCheck.length; i++ ) {
var field = this.fieldsToCheck[i];
if ( field.getText() == '' ) {
isValid = false;
field.showError();
} else {
field.showOK();
}
}
return isValid;
]]>
</method>
</class>
<formvalidator name="myValidator" />
<simplelayout axis="y" spacing="4" />
<!-- This field will be required: -->
<mytextfield name="foo" required="true"
validator="$once{canvas.myValidator}" />
<!-- This field is not required -->
<mytextfield name="bar" />
<button>Check form
<method event="onclick">
if ( myValidator.validate() ) {
debug.write( 'Everything OK - the user filled out fields' );
} else {
debug.write( 'Required field empty' );
}
</method>
</button>
</canvas>
Enjoy!
<canvas debug="true">
<debug x="150" />
<!-- Text field with a black border -->
<class name="mytextfield" width="140" height="16" bgcolor="0x7E7E7E">
<attribute name="required" value="false" />
<attribute name="errorColor" type="number" value="0xff0000" />
<attribute name="validator" value="null" />
<inputtext name="textField" width="${parent.width-2}" align="center"
height="${parent.height-2}" valign="middle"
bgcolor="white" />
<method event="oninit">
if ( this.required ) {
this.validator.addField( this );
}
this.originalBackgroundColor = this.bgcolor;
</method>
<method name="getText">
return this.textField.getText();
</method>
<!-- Highlight the border of the field the specified error color -->
<method name="showError">
this.setAttribute( 'bgcolor', this.errorColor );
</method>
<!-- Return the background color of the field to show it's
filled out -->
<method name="showOK">
this.setAttribute( 'bgcolor', this.originalBackgroundColor );
</method>
</class>
<!-- Abstract validator that checks required fields -->
<class name="formvalidator" extends="node">
<method event="oninit">
this.fieldsToCheck = new array();
</method>
<!-- Register a field to be checked by this at a later time -->
<method name="addField" args="f">
this.fieldsToCheck.push( f );
</method>
<!-- Check all registered fields -->
<method name="validate">
<![CDATA[
var isValid = true;
for ( var i=0; i<;this.fieldsToCheck.length; i++ ) {
var field = this.fieldsToCheck[i];
if ( field.getText() == '' ) {
isValid = false;
field.showError();
} else {
field.showOK();
}
}
return isValid;
]]>
</method>
</class>
<formvalidator name="myValidator" />
<simplelayout axis="y" spacing="4" />
<!-- This field will be required: -->
<mytextfield name="foo" required="true"
validator="$once{canvas.myValidator}" />
<!-- This field is not required -->
<mytextfield name="bar" />
<button>Check form
<method event="onclick">
if ( myValidator.validate() ) {
debug.write( 'Everything OK - the user filled out fields' );
} else {
debug.write( 'Required field empty' );
}
</method>
</button>
</canvas>
Enjoy!