Using FLEX for input forms in BlogCFC :: Part 4
Now that we have completed the form we want to do some validation on what the user has entered here. To do this I added a click handler to the post button to add my Validation there. In that handler method I call a private function that is going to do the validation. When validation succeeds I fill yet another Value Object with the values from the form.
So first let's take a look at the Value Object that we will use for this form.
{
public class CommentVo
{
public var website:String;
public var name:String;
public var email:String;
public var comments:String;
public var subscribe:Boolean;
public var remember:Boolean;
}
}
* Handle form submission
*/
private function submitFormHandler(event:MouseEvent):void {
if (validateForm()) {
_comments.name = commenterName.text;
_comments.email = email.text;
_comments.comments = comments.text;
if (website.text != "" && website.text != "http://") {
_comments.website = website.text;
} else {
_comments.website = "";
}
_comments.remember = remember.selected;
_comments.subscribe = subscribe.selected;
}
* Validate the form
*/
private function validateForm():Boolean {
var submitAllowed:Boolean = true;
// validate name
if (commenterName.text.length == 0) {
commenterName.errorString = _rbValues.mustincludename;
submitAllowed = false;
}
// validate email
var evt:ValidationResultEvent = mailValidator.validate();
if (evt.type == ValidationResultEvent.INVALID )
{
email.errorString = _rbValues.mustincludeemail;
submitAllowed = false;
}
// validate website
if (website.text != "" && website.text != "http://") {
var urlValidator:RegExpValidator = new RegExpValidator();
urlValidator.source = website;
urlValidator.property = "text";
urlValidator.expression = "^(((https?:|ftp:|gopher:)\/\/))[-[:alnum:]\?%,\.\/&##!@:=\+~_]+[A-Za-z0-9\/]$";
urlValidator.flags = "i";
var vld:ValidationResultEvent = urlValidator.validate();
if (vld.type == ValidationResultEvent.INVALID )
{
website.errorString = _rbValues.invalidurl;
submitAllowed = false;
}
}
// validate comments
if (comments.text.length == 0){
comments.errorString = _rbValues.mustincludecomments;
submitAllowed = false;
}
return submitAllowed;
}
This submitting the form will be discussed in a later post, for now I'll just add one more thing and that's the cancel button. To implement it the same as we used it in the ColdFusion version we'll display an alert box where a user can confirm they want to cancel the form. To do this we just throw and Alert with 2 options in there.
* In case the form is cancelled ask for confirmation
*/
private function cancelFormHandler():void {
Alert.show(_rbValues.cancelconfirm, "message", (Alert.YES | Alert.NO), this, confirmCancelHandler);
}
Now to catch the button that is pressed by a user we'll have to add an event handler to the click on the alert box, so we add another handler called confirmCancelHandler
* In case the confirm bar is clicked decide here if the the comments are cancelled or not.
*/
private function confirmCancelHandler(event:CloseEvent):void
{
if (event.detail==Alert.YES)
{
// Close the form
ExternalInterface.call("closeWindow");
}
}
This is it again for today, probably 2 more posts to finish the application.
There are no comments for this entry.
[Add Comment]