Alpha Anywhere has always had a robust set of validation tools. This now includes the FormView control.
Validation javascript
Validation rules for fields in the FormView can be created using the "Validation javascript" property.
formview_validate2.png
"Validation javascript" is a function that will be called to validate the field in your FormView. The function is given the parameter 'v', which is the value in the field. If, for example, a field cannot be blank, you could compare the value of v against an empty string:
Validation for individual fields is executed whenever the field is changed using an Editor. In addition, the entire form is validated when a saving the form using the pre-defined "Save Form Edits/Cancel Edits" buttons. Validating before saving back to the data source will catch validation errors in any field in the form - even if the user has not modified it. All validation occurs client-side, allowing your app to function in a disconnected environment. No callbacks required!
Error Styling
Styling the field and error text can be done by specifying the class to use for the "Error" and "Error Text" properties. These properties can be found on the "Form Properties" tab in the Form View Builder.
formview_validate3.png
Classes can come from a style sheet or can be implemented on the CSS tab in the Form View Builder. In the image above, two classes were created to style errors - errorField and errorMsg. Their implementation is shown below:
The classes will be applied to a field and its corresponding error text when validation fails. In the image below, validation failed for the "Postal Code" field because the postal code cannot be blank and the errorField and errorMsg classes were both applied:
formview_validate7.png
Questions? Comments?
Share your questions or comments here on the forum. Let us know how validation is working for you (or not working!) If you have suggestions for things you'd like to see or need more information to solve your particular problem, post them in the forum.
Get the Component
For the component used to create this post, download the zip file below.
basicFormValidation.zip
Note: The list control in this component uses a SQL connection string against the Northwinds database, which is included in your Alpha Anywhere installation. You will need to create or modify the connection string for the list to make it work.
Validation javascript
Validation rules for fields in the FormView can be created using the "Validation javascript" property.
formview_validate2.png
"Validation javascript" is a function that will be called to validate the field in your FormView. The function is given the parameter 'v', which is the value in the field. If, for example, a field cannot be blank, you could compare the value of v against an empty string:
Code:
if (v == "") { return "Field cannot be blank."; }
Error Styling
Styling the field and error text can be done by specifying the class to use for the "Error" and "Error Text" properties. These properties can be found on the "Form Properties" tab in the Form View Builder.
formview_validate3.png
Classes can come from a style sheet or can be implemented on the CSS tab in the Form View Builder. In the image above, two classes were created to style errors - errorField and errorMsg. Their implementation is shown below:
Code:
.errorField div { color: red; } .errorMsg { display: block; color: red; padding: 5px; margin: 2px; }
formview_validate7.png
Questions? Comments?
Share your questions or comments here on the forum. Let us know how validation is working for you (or not working!) If you have suggestions for things you'd like to see or need more information to solve your particular problem, post them in the forum.
Get the Component
For the component used to create this post, download the zip file below.
basicFormValidation.zip
Note: The list control in this component uses a SQL connection string against the Northwinds database, which is included in your Alpha Anywhere installation. You will need to create or modify the connection string for the list to make it work.
Comment