he field is checked against a converter (which specifies the format/pattern for the value) and it is checked against any validation constraints. For details on converters and validators, see JSF Converters and JSF Validators.
When an onfocus is event is used to run the behavior, a field is considered valid if it can be converted to a JavaScript object using the supplied converter (the validator is not invoked). Note that if an error-span is provided, the field is initially considered in error if the error-span is visible.
When an onblur event is used to run the behavior, a field is considered valid if it can be converted from a string (the value of the field) to a JavaScript object using the supplied converter. For example, given the date/time pattern "MM/dd/yy", the string "12/31/04" can be converted while the value "13/40/99" cannot be converted. If conversion is successful, the value is then checked against any validation constraints supplied in the validator. For details on converters and validators, see JSF Converters and JSF Validators.
If a field is valid, if onblur is used to run the behavior, the value is converted back to a string and the result put in the field's value (this ensures that the value contains optional literals, characters supplied by the converter are displayed, ...) For example, if strict is set to 1 (moderately strict) and the pattern is "MM/dd/yy", the string "11/22" is considered valid (the year is supplied) and the "completed" value "11/22/05" is displayed. After the value is updated, for both the onfocus and the onblur invocations, if a success-function is provided, the function is run. If the function does not return false, the field's CSS class is set to the success-class (if provided) and the success-action(s) are run (if provided).
If a field is not valid, its value is left as is, the error-function is run (if supplied), the field's CSS class is set to the error-class (if supplied), and the error-action(s) are run (if supplied).
The success-function has one additional capability. If the success function is run, the return value of the function is treated as a "validator". If the function returns true, the success CSS and actions are executed. If the function returns false, the entire error processing task is run (the error function is run, the error CSS applied, the error actions runs). Thus the success-function can both process an additional stage of validation and it can process "success" features (e.g., hiding an error div).
Both the error and the success functions have the same signature as our "usual" JavaScript functions, namely, the first argument passed to the function is the "this" pointer and the second argument passed to the function is the event object. The event object is augmented with two additional properties. If an error has occurred, the attribute evt.errorMsg is populated with the error message (localized). If success has occurred, the attribute evt.objValue is populated with the converted value (e.g., for a date/time field, the JavaScript Date object valued with that value is present).
<hx:inputHelperAssist>
<hx:formItem>
<input type="text" /> or <textarea />
hX_5.addBehavior("id", "event-name", new hX_5.JSFBehaviorValidate(attributes)); where
id |
The ID of the HTML tag to which the component is attached. |
attributes |
Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel". |
Event |
Description |
---|---|
onfocus |
When attached to an onfocus, the value is checked to see that it is the right "type" (for example, that it is a number). Validation rules are not checked. |
onblur |
When attached to an onblur, the value is checked that it is the right type and all validation rules are checked. |
Attribute name |
Description |
---|---|
converter |
The ID of a converter that has already been constructed. The converter describes the format of the value in the input field. |
validator |
The ID of a validator that has already been constructed. If the validator is supplied, the constraints described in the validator are used limit the values a user can pick. |
success-class |
If the field is valid, its CSS class is set to the success-class (thus changing its display). (If more than one class name is provided, they should be separated with spaces.) |
error-class |
If the field is not valid, its CSS class is set to the error-class (thus changing its display). (If more than one class name is provided, they should be separated with spaces.) |
default-class |
A synonym for success-class. (If no success-class is provided, then this class is used as the success-class.) |
success-action |
If the field is valid, the action(s) to execute. See the documentation on actions for a list of the available actions. |
success-target |
If the field is valid, the target(s) of the success actions. See the documentation on actions for a description of targets. If no target is provided the field itself is used as the target. |
error-action |
If the field is not valid, the action(s) to execute. See the documentation on actions for a list of the available actions. |
error-target |
If the field is NOT valid, the target(s) of the success actions. See the documentation on actions for a description of targets. If no target is provided the field itself is used as the target. |
success-function |
A JavaScript function (or inline string of JavaScript) to perform if the field is valid. If the function returns false, validation fails and the error action/function is executed. |
error-function |
A JavaScript function (or inline string of JavaScript) to perform if the field is NOT valid. |
label-id |
If provided, the ID of a tag on the page that is used as the label for the field. The ID usually identifies a span or a div. |
label-success-class |
The name of the CSS class that is to be applied to the label if the field passes validation/conversion |
label-error-class |
The name of the CSS class that is to be applied to the label if the field fails validation/conversion. |
info-span-id |
The ID of a tag on the page that contains "help" or "informational" text associated with the field. This tag is hidden when the field is in error. The ID usually identifies a span or a div. |
error-span-id |
The ID of a tag on the page that is used to display errors associated with the field. If this tag is visible when the page is displayed, it is assumed that the field is initially in error (for example, failed server-side validation). The ID usually identifies a span or a div. |
span-is-popup |
If a keyword is provided, the info and error spans are treated as block level elements (as divs) and then are positioned just above, below or left of the input field (for example, as "popups"). |
info-span-always |
If true, the info-span is always on display (unless there is an error). Otherwise, the info-span is only displayed while the field has focus. |
error-span-always |
If true, the content of the error span is always displayed (as is) whenever any kind of client-side error is detected. Otherwise, if a client-side error is detected, an error message in hxclient_v3_s.js is used. |
Runs after any other handlers provided for the event.
Stops the event from bubbling. It is not possible to stop an onblur or onfocus event from continuing.
API call |
Description |
---|---|
object = setAttribute(attribute) |
Sets an attribute or changes its value (if it was set previously). |
string = getAttribute(attribute-name) |
Retrieves the current value of an attribute. |
When onblur fires, check that a date field is correct and within the specified bounds. Change the CSS class if it isn't
hX.addConverter("24", new hX.DateTimeConverter("strict:1", "format:MM/dd/yyyy")); hX.addValidator("25", new hX.DateTimeValidator( "min-bound:20000101000000", "required:true")); hX.addBehavior("form1:text1", "onblur", new hX.JSFBehaviorValidate("success-class:inputText", "converter:24", "validator:25", "error-class:inputText_Error"));
When onblur fires, check that number field is correct and within the specified bounds and meets custom validation specified by the function func_1. Change the CSS class if it fails.
<SCRIPT> function func_1(thisObj, thisEvent) { if (thisEvent.objValue != null) { if (thisEvent.objValue == 10 || thisEvent.objValue == 20) return false; } return true; } </SCRIPT> hX.addConverter("26", new hX.NumberConverter("strict:1", "pattern:#,##0", "locale:,.%?-$")); hX.addValidator("28", new hX.NumberValidator( "min-bound:0.0", "max-bound:100.0", "required:true")); hX.addBehavior("form1:text2", "onblur", new hX.JSFBehaviorValidate("default-class:inputText", "converter:26", "validator:28", "success-function:return func_1(this, event);", "error-class:inputText_Error"));
Check that a field contains only characters in the specified character set and is 1 or 2 characters long. When the field receives focus, if it's valid, change the CSS style to show that the field has focus, unselect the contents of the field, show an informational prompt and hide the error message. If it's not valid, change the CSS style to show the field is in error and show the error message. When the field loses focus, if the field is valid, change the CSS class to the normal display and hide the error message and informational prompt. If it's not valid, display the error message, hide the information prompt, change the CSS of the field and select the contents of the field.
hX.addValidator("1e", new hX.StringValidator("constraint-regexpression:^[A-Za-z]+$", "required:true", "min-length:2")); hX.addBehavior("form1:text1", "onfocus", new hX.JSFBehaviorValidate("validator:1e", "error-class:inputTextWhite_Error", "success-class:inputTextWhite", "success-action:unselect", "info-span-id:form1:span1", "error-span-id:form1:span2", "span-is-popup:below")); hX.addBehavior("form1:text1", "onblur", new hX.JSFBehaviorValidate ("validator:1e", "error-class:inputTextWhite_Error", "success-class:inputText", "error-action:selected", "info-span-id:form1:span1", "error-span-id:form1:span2", "span-is-popup:below"));