[TUTORIAL] Disponibilidade do nome de usuário

[seender]

Disponibilidade do nome de usuário

Em fóruns de sistemas pagos quando é digitado o nickname de um usuários já existente no fórum, é alertado que já existe o mesmo. Neste tutorial vamos fazer com que em seu fórum, quando um usuário for se registrar seja mostrado se já existe o nome de usuário ou não.

--> Tutoriais dicas, e astúcias <--
Disponibilidade do nome de usuário

1º - Adicionar um código na folha de estilo:
Para que o efeito saia conforme desejamos, vamos precisar adicionar um código CSS para quando o internalta digitar no campo o nome do usuário desejado, o fórum indicar se há ou não o usuário registrado.

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

Vamos acrecentar na folha o seguinte código:

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

Vermelho: Denomina-se a cor que será visível quando digitado um usuário já existente no fórum.
Verde: Denomina-se a cor que será visível quando digitado um usuário não existente no fórum.

2º - Adicionar o código na folha .JS:
Vamos adicionar agora o código que permitirá que o CSS seja válido no campo na hora do registro. Vamos aplicar o mesmo em uma folha .JS de seu fórum.

Painel de controle ->> Módulos ->> HTML e Javascript ->> Gestão dos códigos Javascript ->>
Clique no botão "Criar um novo javascript".

Em "Investimento", vamos marcar a opção "Em todas as páginas". Quando fizer, adicione na caixa de texto o seguinte código:

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')}})}})}});

Clique no botão "Confirmar".

--> Tutoriais dicas, e astúcias <--
Disponibilidade do nome de usuário

• Resultados:
  Este usuário já existe!
  
  
  
  Este usuário não existe!
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Disponibilidade do nome de usuário

[Dury]

Disponibilidade do nome de usuário - Vídeo tutorial

Melhor visualização do vídeo no seguinte endereço:
[VIDEO-TUTORIAL] Disponibilidade do nome de usuário.