No início deste ano, escrevi um aplicativo que permitia ao usuário preencher um nome de usuário como parte do registro. Pensei em adicionar conforto ao formulário, fazendo uma validação não intrusiva do nome de usuário em relação ao provedor de associação ASP.NET. Meu objetivo era bem simples, ver se o nome de usuário estava disponível e deixar o usuário saber, mas não impedi-lo de continuar o formulário. Decidi usar jQuery e um HttpHandler simples.

A marcação para a linha de nome de usuário do formulário contém um rótulo e um campo de entrada para o nome de usuário a ser inserido. Ele também contém algumas tags Span, uma para o indicador de que o nome de usuário está sendo verificado (usernameLoading) e outra para indicar os resultados (usernameResult).

<

li

>

<

etiqueta

id

=”lblUserName”

para

=”txtUserName”

>

Usuário Nome:

label

>

<

input

id

=”txtUserName”

nome

=”txtUserName”

classe

=”preenchimento obrigatório”

tipo

=”texto”

maxlength

=”20″

valor

=”<%=UserName%>“

/> <

em

> <

img

src

=”images/required.png”

alt

=”obrigatório”

/>

em

>

<

span

id

=”usernameLoading”

>

<

img

src

=”imagens/indicador.gif”

alt

=”Indicador Ajax”

/>

span

>

<

span

id

=”usernameResult”

>

span

>

li

>

O jQuery para o processo atribui um manipulador de eventos ‘blur’ para o Campo txtUsername. Quando um usuário sai do campo, o manipulador de eventos de desfoque dispara. Uma definição de função é definida no manipulador que primeiro exibe o indicador giratório Ajax e, em seguida, posta o valor de txtuserName para o checkusername.ashx HttpHandler. O método post também define uma função para lidar com a resposta do manipulador que esmaece o resultado usernameResult Span se já estiver exibido. Em seguida, chama uma função personalizada 400 ms depois, finishAjax (…).

$ (

function

() {$ (

‘#usernameLoading’

).hide (); $ (

‘#txtUserName’

).blur (

função

() {$ (

‘#usernameLoading’

).show (); $.post (

“checkusername.ashx”

, {username: $ (

‘#txtUserName’

).val ()},

função

(resposta) {$ (

‘#usernameResult’

).fadeOut (); setTimeout (

“finishAjax (‘usernameResult’,'”

+ escape (resposta) +

“‘)”

, 400);});

return

falso

;});

função

finishAjax (id, resposta) {$ (

‘#usernameLoading’

).hide (); $ (

‘#’

+ id).html (unescape (resposta)); $ (

‘#’

+ id).fadeIn ();}

//terminarAjax

A função finishAjax oculta a imagem de processamento Ajax, define o html do usernameResult Span e o desvanece.

O checkusername.ashx contém o código para ver se o nome de usuário está disponível. Você pode implementar qualquer tipo de bacalhau e você deseja que este método execute a validação do nome de usuário, senha ou qualquer outra coisa. Neste caso, ele simplesmente verifica se existe um usuário para o nome de usuário, se houver, ele retorna algum HTML para indicar que o nome do usuário não está disponível, caso contrário, ele os informa que está disponível.

Público

Sub

ProcessRequest (

ByVal

contexto

As

HttpContext)

Implementa

IHttpHandler.ProcessRequest context.Response.ContentType=

“text/plain”

Dim

mu

As

MembershipUser=Membership.GetUser (context.Request (

“username”

))

Se

Não

IsNothing (mu)

Então

context.Response.Write (

“color: # 0c0”

“> Nome de usuário disponível “

)

End

Se

context.Response.Flush () context.Response.

End

()

End

Sub

Quando o manipulador retorna o HTML resultante, o indicador de progresso é apagado e o resultado desaparece na visualização. Agora o usuário sabe que seu nome de usuário é válido e pode continuar com o formulário ou escolher um novo nome de usuário. Essa técnica pode ser usada para fazer praticamente qualquer tipo de validação do lado do cliente/lado do servidor sem impedir o progresso do usuário.

Compartilhe este artigo com seus amigos!

Source link

Categories: Wordpress