Como Refinar a sua validação de formulário Web

Depois de ter verificado seus campos necessários e forneceram feedback para o usuário, é necessário para refinar a validação do formulário web. Antes de fazer isso, você deve fazer uma pausa e olhar para o código que você adicionou para validação.

o enviar manipulador de eventos é configurado através do jQuery enviar() função:

$ ( "# Formulário de usuário") apresentar (function (e) {removeFeedback () -. Erros var = validateForm () - se (erros == "") {return true-} else {provideFeedback (erros) -e.preventDefault ( ) -Retornar falsa -}}) -

Dentro do enviar() função, a primeira coisa que acontece é qualquer feedback é removido. Em seguida, o validateForm () função é chamada e qualquer coisa que vem de volta do que a função está definida para os erros variáveis.

Se a variável de erros está vazia, então o enviar() função retorna booleano verdade, que essencialmente diz ao navegador, "Tudo ok-vá em frente e enviar o formulário." No entanto, se forem encontrados erros, o dar uma resposta() função é chamada e as ações padrão (para enviar o formulário) estão parados, graças à preventDefault e retorno falso declarações.

o validateForm () função é o coração da lógica de validação para o formulário.

função validateForm () {var errorFields = new Array () - // teste exigido campos têm algo em themif {errorFields.push ( 'name') ($ ( '# name') val () == "".) -} if (. $ ( '# e-mail') val () == "") {errorFields.push ( 'email') -} if (. $ ( '# password1') val () == "") {errorFields. push ( 'password1') -} retornar errorFields-} // fim função validateForm

Nesta função, uma matriz é instanciado para manter os campos de erro. Isso permite que você armazene mais do que um erro em vez de um único erro em um momento (o que seria frustrante para o usuário).

Cada campo obrigatório é recuperado usando o seu ID. Se o valor do campo é "", em seguida, a ID do campo com o erro é empurrado para a errorFields array. Finalmente, o errorFields matriz é retornado e se torna a matriz de erro que você vê na enviar() manipulador.

Outra maneira de realizar essa tarefa seria a de adicionar uma classe para cada elemento que é necessário e, em seguida, loop através de cada uma das classes necessárias com jQuery, como $ ( '. Required'). Each (.

Com essa validação, você pode olhar para o dar uma resposta() função:

função provideFeedback (incomingErrors) {for (var i = 0- i lt; incomingErrors.length- i ++) {$ ( "#" + incomingErrors [i]) addClass ( "errorClass".) - $ ( "#" + incomingErrors [i] "Error") removeClass ( "errorFeedback") -.} $ ( "#errorDiv") html ( "Erros encontrados") -.}

o dar uma resposta() função percorre os erros de entrada e adiciona o errorClass classe para os campos. Lembre-se do CSS que esta classe simplesmente define a cor de fundo para um tom de vermelho. Em seguida, o errorFeedback classe é removido. Esta classe esconde o feedback textual, assim, removendo a classe, o feedback torna-se visível para o usuário. Finalmente, fora do circuito, o errorDiv'S HTML está definido para a frase "Erros encontrados".

A peça final do form.js arquivo é o removeFeedback () função:

função removeFeedback () {$ ( "# errorDiv") html ( "") -. $ ( 'input') cada (function () {$ (this) .removeClass (. "errorClass") -}) - $ ( ' .errorSpan ') cada (function () {$ (this) .addClass ( "errorFeedback") -}.) -}

Esta função primeiro define o errorDivHTML 's em branco. Em seguida, cada entrada tem o seu errorClass removido e cada errorSpan na página tem o seu errorFeedback classe adicionado, o que, essencialmente, esconde-los de visibilidade. Tudo isto é feito com a ajuda de selectores e funções jQuery.