Question

I’m using XFBML embedded in a HTML5 document. I’ve set up client-side validation following the instructions provided in the “Registration Advanced Uses” doc on Facebook’s site, but it only shows errors on blur, and doesn’t validate when I click the “Register” button (so if I fill out a field wrong and click outside on another element, it displays the error, but then I can click on the Register button and it registers me anyway).

I’ve traced it in the JS debugger, and by adding alert/log statements, and my validate_registration function only gets called onblur, and never when I click the Register button.

Anyone seen this behavior and know what I’m missing here? The live example Facebook has on the “Registration Advanced Uses” works perfectly, so I know I’ve got a mistake somewhere.

My XFBML tag is this:

<div class="fb-registration"
    onvalidate="validate_registration"
    fields="[
      {'name': 'name'},
      {'name': 'first_name'},
      {'name': 'gender'},
      {'name': 'email'},
      {'name': 'user_type', 'description': 'Are you a?', 'type': 'select',
        'options': {
          'parent': 'Parent/Guardian looking for childcare',
          'sitter': 'Babysitter/Nanny looking for sitting jobs'
        }
      },
      {'name': 'zip_code', 'description': 'Zip code', 'type': 'text'},
      {'name': 'over_eighteen', 'description': 'I am at least 18 years old', 'type': 'checkbox' }
    ]"
    fb_only="true"
    redirect-uri="<%= parse_fb_connect_signed_request_users_url %>"
    width="530">
  </div>

and my validation function is this:

function validate_registration (custom_fields) {
    var errors = {},
        regexZipCode = /^\d\d\d\d\d$/;

    console.log("in validate_registration");

    if (custom_fields.user_type !== 'parent' && custom_fields.user_type !== 'sitter') {
        errors.user_type = "Select either Parent or Sitter";
    }

    if ( ! regexZipCode.test(custom_fields.zip_code) ) {
        errors.zip_code = 'Enter your 5-digit U.S. zip code';
    }

    if ( ! custom_fields.over_eighteen ) {
        errors.over_eighteen = 'You must be at least 18 years old to use this site!';
    }

    return errors;
}

Answer 1

So, never mind this.

I was getting the message “You’ve just registered for X using your Facebook account.
If you didn’t mean to do this, you can undo this below.” and thought that it meant I had registered. But if I click “Continue” at that point, it shows me all the validation errors, so it does work correctly – it just doesn’t validate until after the final step.