Como refinar sua validação de formulário web

Depois de ter verificado os seus campos necessários e forneceram feedback para o usuário, você precisa refinar a validação do seu 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:

$ ("#userForm") .submit (function (e) {removeFeedback () - var erros = validateForm () - Se for (erros == ") {Return true-} else {provideFeedback (erros) -e.preventDefault () - return false -}}) -

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

Video: Validação de Formulários HTML com JQuery [enquad.com.br]

Se a variável de erros está vazia, então o enviar() função retorna booleano verdade, que basicamente 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 afirmações.

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

Video: AngularJS - #4 - Validando Formulários - Rodrigo Branas

função validateForm () {var errorFields = new Array () - // verifica campos obrigatórios têm algo em themif ($ ( `# name`) val () ==. ") {ErrorFields.push ( `name`) -} 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 desse campo é “, em seguida, o ID do campo com o erro é colocado na errorFields matriz. 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, percorrer 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] "Erro") .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, do lado de fora do circuito, o errorDiv‘S HTML está definido para a frase “Erros encontrados”.

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

removeFeedback function () {$ ("#errorDiv") .html (") - $ (. each (function `input`) () {$ (this) .removeClass ("errorClass") -}) -. $ ( `ErrorSpan`) cada (function () {$ (this) .addClass ("errorFeedback") -}) -}

Esta função primeira 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 adicionada que, essencialmente, os esconde de visibilidade. Tudo isso é feito com a ajuda de seletores e funções jQuery.