Disponibilidade do nome do usuário

Qual é minha questão:
Olá, estava vendo o tutorial de disponibilidade de nome de usuários e no meu forum deu certo.

Eu fiz isso:

1° peguei esse link e colei na folha CSS

Código:

#username_reg {
border:2px solid red!important;
}
#username_reg.okusername {
border:2px solid green!important;
}

2° peguei fui la em cpdicos javascript e criei um novo com esse script

Código:

    $(function(){if($('input#username_reg').length){$('input#username_reg').keyup(function(){if($('#username_reg').attr('value')==''){$('input#username_reg').removeClass('okusername')}else{url='/search?mode=searchuser&fieldname=username&search_username='+encodeURIComponent($('input#username_reg').val());$.get(url,function(data){if($('select[name=username_list] option',data).val().toLowerCase()==$('input#username_reg').val().toLowerCase()){$('input#username_reg').removeClass('okusername')}else{$('input#username_reg').addClass('okusername')}})}})}});

Mas ai na hora da barrinha ficar verde para disponiveis e vermelho para nao disponiveis nao ficou.
Ficou com a borda vermelha estando disponivel ou não.

Eu queria saber se é por causa da minha versão phpp2 seila se nao for alguem poderia me ajudar?

Medidas que eu tomei para corrigir o problema:
Procurei tutorial nao deu certo e postei aky

Links e imagens do meu problema:
Não tenho

Endereço do meu fórum:
http://pokeilusion.forumeiros.com/

Versão do meu fórum:
PHPBB2

Tente mudar o primeiro código por este

Código:

#username_reg.okusername {
border:2px solid red!important;
}
#username_reg {
border:2px solid green!important;
}

Agora aconteceu a mesma coisa só que invéz de ficar com a boda verde os disponiveis e vermelha os não disponiveis.

Ficou com a borda verde os disponiveis e nao dispeniveis.