Como fornecer feedback para os usuários do formulário Web

O padrão geral para o feedback em um formulário web será para destacar o campo que precisa de atenção e ativar mensagens para o campo individual ea forma geral.

Para facilitar o fornecimento de feedback, criar duas novas funções form.js.

  1. Aberto form.js em seu editor, se não já está aberto.

  2. Dentro form.js, adicionar as seguintes funções, após o validateForm 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") -.} removeFeedback function () {$ ( "# errorDiv") html ( "") -.. $ ( 'input') cada (function () {$ (this) .removeClass ( "errorClass") -}) - $ (. '. errorSpan') cada (function () {$ (this) .addClass ( "errorFeedback") -}) -}

  3. Com essas funções no arquivo, você próxima precisa chamá-los.

    A chamada para o removeFeedback função é adicionada imediatamente dentro do enviar manipulador para que o feedback de erro é apagada quando o formulário é enviado. Essa chamada se parece com isso:

    removeFeedback () -

    o dar uma resposta função precisa ser acrescentado, na condição mais no manipulador de submeter o formulário e se parece com isso:

    provideFeedback (erros) -

    o enviar manipulador deve agora olhar como este:

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

  4. Salve o arquivo (como form.js) Dentro de sua raiz de documentos.

    Neste ponto, todo o ficheiro deve consistir do presente:

    $ (document) .ready (function () {$ ( "# formulário de usuário") apresentar (function (e) {removeFeedback () -. var erros = validateForm () - se (erros == "") {return true-} else {provideFeedback (erros) -e.preventDefault () - return false -}}) - função validateForm () {var errorFields = new array () - // verifica os 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-} // função final validateFormfunction provideFeedback (incomingErrors) {for (var i = 0- i lt; incomingErrors.length- i ++) {$ ( "#" + incomingErrors [i]) addClass ( "errorClass".) - $ ( "#" + incomingErrors [i] + "Erro") removeClass ( "errorFeedback") -.} $ ( "# errorDiv") html ( "Erros encontrados") -.} removeFeedback function () {$ ( "# errorDiv") html ( "") -.. $ ( 'input') cada (function () {$ (this) .removeClass ( "errorClass") -}) - $ (. '. errorSpan') cada (function () {$ (this) .addClass ( "errorFeedback") -}) -}}) -

  5. Recarregar form.php no seu browser.

  6. Limpar qualquer informação dos campos, se houver foi salvo pelo seu browser.

  7. Dentro de campos vazios no formulário, clique em Enviar consulta.

    image0.jpg

  8. Preencha o campo Nome e clique em Enviar consulta.

    O feedback indicando que houve um erro no campo Nome deve limpar, mas os outros permanecem.

    image1.jpg

  9. Preencha os detalhes dentro o endereço e senha campos E-mail e clique em Enviar consulta.

    O formulário deverá apresentar, mais uma vez dando uma Page Not Found ou erro semelhante.

Semelhante

menu