From Facebook Developer Wiki

Introduction

This document talks about validating input within Javascript. You may also be interested in Verifying_The_Signature

Validating input from text boxes, radio buttons, and other form elements on Facebook is actually quite simple with FBJS, and in many case the same as with normal Javascript validation. Just as with normal Javascript validation, you can use onkeyup, onclick, and the other usuals to call a JavaScript function to validate input. Form validation is just as simple once you determine how to access the elements of a form. The easiest way is to call the FBJS serialize function on the form, which will return an associative array of form elements.

Basic Validation

Suppose you have a text box for input; maybe you need the user to enter a 7 digit number, a special keyword, or you just need to make sure that the user has entered something. In any event, you probably want to validate the text box when the user has finished typing. One way of approximating this is to to call a validation function when the text box loses focus. This can be done through the event handler onBlur.

In the above code we have told our text box to call checkTextBox() when the onblur event occurs. We've also used this as the parameter, that way when checkTextBox() is called, we'll have easy and immediate access to the text box that went out of focus.

The checkTextBox function might look something like this:

Here we get the actual text in the text box by calling getValue() on it, and then we send it to checkValidity() to see if the text is valid. Once again, this validation function could be anything, depending on what you expect the user to enter. If the input is not valid, then you should display an error message. In this example, the function displayError() is called to handle that. It is of course up to you how you want to handle display of an error

One way might be through the use of FBJS dialogs:

For this example displayError() is nothing more than a wrapper function for a FBJS contextual dialog. We set the context as the text box, and passed in title and message for the other parameters. When called, this will pop up a contextual dialog next to the text box, displaying the error message.

Form Validation

Using serialize

Sometimes you may need to do validation on a number of input elements in a form, especially after a user clicks a submit button. To access the elements of a form, it is easiest to call the serialize function, which returns an associative array of elements in the form:

The array contains key->value pairs, where the key is the name of the form element (not the id), and value is input. So if you have a text box inside of your form like this ...

You could get the value from it with the following FBJS:

In this example, the form object is retrieved with document.getElementById() and then it's serialized to get all the inputs in the form. The text in the text box is then retrieved by referring to its name.

Validating with onsubmit

Now, if you're validating a form, you probably want to call your validation function when the form is submitted to make sure everything is right. You can do this simply with onsubmit in your form tag:

In this case, the function checkForm() will be called when the form is submitted. The submit event occurs when your form is submitted, and if the callback function you attach to the event returns false, then the the form won't get submitted. So if any there are any validation errors, your validation function should return false.

In this case, we call serialize on our form, pull the value out of boxValue to get text the user entered, and we check to see if its length is greater than 0. If it is, we return true, which will allow the submit to continue, and if it isn't, we return false. Note that in real life you would probably have a different validation alogrithm depending on what you're doing , and you would display some sort of error message so the user knows why the submit did not go through.

Friend selectors

Here's a common validation issue, suppose you want to check if a user has actually selected a friend before allowing a submit to go through. You form might have a fb:friend-selector in it, as follows:

You can pull the value out of your fb:friend-selector just as you do with any other form element:

As usual, serialize is used to pull the elements out of the form (there's only one in this case), and then the friend selector value is accessed by entering in its name, friend_selector_id. Note that we check to see if our friend-selector is null AND we check to see if it's equal to the empty string. With fb:friend-selector, if a user doesn't input anything, the value will be set to null. However, if the user enters something but it is not a friend, then the value is set to an empty string. So you must check both cases, to make sure that the input is valid.

With a fb:friend-selector the default name is friend_selector_id, but you can change that to something else with idname:

Now you would pull out the value with

For <fb:multi-friend-input> there will be an element called ids which will serialize as an array, so typeof params.ids will return undefined if no friends were selected, and 'object' if they were. If they were selected you can also do params.ids[0] to return the first friend for example.

Don't forget that most FBJS is chainable as well. In the above examples, things have been done step-by-step for clarity and readability. For example, if you wanted to just stop the friend-selector submission if it was null, you could do it in one line: