Question

The javascript console keeps showing “Not a custom field name: username” when its supposed to show an error for the username field. There clearly is a field named “username”. I tried changing it to some other name everywhere, but it still didn’t work.
Any idea what is going on?

<fb:registration redirect-uri="<?=$pageurl?>" 
  fields="[{'name':'name'},{'name':'email'},{'name':'location'},{'name':'username','description':'Username','type':'text'},{'name':'password','view':'not_prefilled'},{'name':'captcha','view':'not_prefilled'}]"
  onvalidate="validate" width="400"></fb:registration> 

and my validate function…

function validate(form,cb)
{
    console.dir(form);  
    $.get('/api/?f=user_email_present&username='+form.username+"&email="+form.email,function(data){
        console.log(data);
        if(data.username==false)
        {
            cb();
        }
        else 
        {
            if(data.username=='username')
                cb({username: 'That username is already taken. Please try another username.'});
            else if(data.username=='usernamelength')
                cb({username: 'The username cannot exceed 20 characters in length.'});

        }
    });
}

I can’t be too sure, but I think I remember all this working a while back. Took me by complete shock when we are 2 days from launch.

Update: I scrapped out asynchronous validation and used the other validation. It still throws the same error!

Answer 1

After spending the better part of two days, I managed to figure out what is going on. It is a silly but potent bug on facebook’s end. If the width of the widget is too less, it gives this error. Increasing the width to 800px fixed it promptly. Probably they don’t render the proper error fields when the width is too small.
I have filed a bug report: https://github.com/facebook/connect-js/issues/275
If you guys can give it a shot and comment on my bug report so that they can take action immediately, it would be awesome.