1

O formulário do sistema que desenvolvo está cheio de alerts para avisar o usuário que ele não pode deixar aquele campo sem preencher e tal. O problema é que os alerts são muito incômodos, e por isso queria substituir por somente uma mudança de cor no input que ele clicar, não escrever nada, e depois clicar fora. Além disso seria interessante uma mensagem quando ele clicasse no botão, tipo essa do formulário de cadastro do Facebook (façam o teste clicando no campo e depois clicando fora). Sei que ninguém aqui trabalha pra mim, por isso mesmo, se me ajudassem com que evento javascript eu teria que usar para funcionar dessa maneira já seria de grande ajuda.

Por exemplo, eu usaria um onkeypress, onclick, onblur?? Outra coisa? Não sei.

E pra fazer aparecer a mensagem sem ser através de uma div com display none, seria através de uma espécie de validate massage?? Não sei

Ajuda eu

Ps. Desenvolvo em jsf + primefaces

4
  • Cara o jeito é trocar o código onde o alert está implementado, não tem como substituir a função nativa do javascript chamada alert() por uma personalizada
    – Marcelo
    29/01/2018 às 22:09
  • Se você quer saber o que cada evento faz: onkeypress é quando a tecla é pressionada, onkeydown é quando a tecla é empurrada pra baixo onkeyup é quando a tecla vai pra cima. onblur o usuário tira o foco do input de um certo formulario, onfocus é quando é "clicado"/focado o input de um formulario. Só pra te orientar
    – Marcelo
    29/01/2018 às 22:12
  • O Primefaces aceita essa mudança?
    – Sam
    29/01/2018 às 22:21
  • @dvd aceita. No caso minha dúvida agora é só como fazer aparecer uma mensagem explicativa quando passar o mouse ou clicar no input.
    – Luan Silva
    30/01/2018 às 17:02

3 Respostas 3

4

Uma forma de mostrar um aviso é criando dinamicamente um balão ao lado do input com CSS e JS.

O exemplo abaixo funciona com inputs e selects. Cada campo deve estar dentro de um elemento (no caso eu coloquei um span). Basta colocar a classe validar e o data-req com o texto que será exibido no balão.

Veja exemplo:

var els = document.querySelectorAll(".validar");
for(var x=0; x<els.length; x++){
   els[x].addEventListener("blur", function(){
      if(this.value == ''){
         this.nextSibling.outerHTML = '';
         var alerta = document.createElement("span");
         alerta.setAttribute("class", "aviso");
         var t = document.createTextNode(this.dataset.req);
         alerta.appendChild(t);
         var seta = document.createElement("em");
         seta.setAttribute("class", "arrow-left");
         alerta.appendChild(seta);
         this.parentNode.insertBefore(alerta, this.nextSibling);
      }
   });

   els[x].addEventListener("focus", function(){
      this.nextSibling.outerHTML = '';
   });
}
*{
   position: relative;
}

.aviso{
   position: absolute;
   display: block;
   white-space: nowrap;
   padding: 5px;
   border-radius: 3px;
   top: 50%;
   left: 101%;
   background: #f30;
   color: #fff;
   z-index: 9;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   transform: translateY(-50%);
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; 
  border-right: 5px solid #f30;
  position: absolute;
  top: 50%;
  left: -5px;
  margin-top: -5px;
}
<span>
   <input class="validar" data-req="Campo obrigatório" type="text" />
</span>
<br /><br />
<span>
   <input class="validar" data-req="Campo obrigatório" type="text" />
</span>
<br /><br />
<span>
   <select class="validar" data-req="Campo obrigatório">
      <option value="">Selecione...</option>
      <option value="1">1</option>
   </select>
</span>

5
  • Infelizmente o inputText do primefaces não aceita o 'data-req', fala que esse atributo não foi especificado.
    – Luan Silva
    2/02/2018 às 14:04
  • Vou trocar por alt... só um instante.. O "alt" ele aceita né?
    – Sam
    2/02/2018 às 14:10
  • ele aceita sim!
    – Luan Silva
    2/02/2018 às 14:13
  • Eu creio que seja porque mesmo com o inputText dentro do span, quando eu inspeciono eu vejo que cada elemento está num tr e td diferente.
    – Luan Silva
    23/02/2018 às 2:21
  • Vamos continuar esta discussão no chat.
    – Sam
    26/02/2018 às 23:14
2

Recomendo utilizar plugins jQuery bastante populares entre os desenvolvedores, dois exemplos com ótima documentação e fácil implementação são:

Vantagens:

  • Ambos são plugins registrados e listados pelo site oficial do jQuery.
  • A implementação em sua aplicação é rápida e simples.
  • Os plugins já foram testados e utilizados por centena de desenvolvedores, isso vai te economizar tempo em bateria de testes que você faria criando seu próprio script na unha.
  • A UI (User Interface) já vem pronta e testadas em diversos tamanhos de tela, isso te economiza tempo em bateria de testes.
  • Existe uma quantidade muito grande de validações possíveis em campos, incluindo expressões regulares.
  • Simplifica a manutenção da sua aplicação por outros desenvolvedores.

Desvantagens:

  • Necessita da Biblioteca jQuery.
  • Sua aplicação ficará alguns KB maior por conta do carregamento do plugin.

É importante você ter conhecimento de JavaScript e jQuery para desenvolver suas aplicações, mas nem por isso você precisa 'reinventar a roda', estude a a linguagens, utilize e entenda as bibliotecas e plugins prontos, sua aplicação vai ser concluída em menor tempo e você vai aprender bem mais rápido analisando e utilizando códigos prontos...

1

Se você usar jQuery, você pode criar um script mais ou menos assim (acabei de fazê-lo, mas você pode ajustá-lo para as suas necessidades):

(function ($) {
  'use strict';

  $(function () {
    $('form').each(function () {
      var $form = $(this);

      /**
       * Prevenir o popup de requerido default.
       */
      $form
        .find('[required]')
        .removeAttr('required')
        .attr('data-required', 'true')
      ;

      $form.on('submit', function (event) {
        /**
         * Iterar sobre todos os elementos que tenham
         * o atributo `required`.
         */
        $form
          .find('[data-required="true"]')
          .each(function () {
            var $this = $(this);
  
            /**
             * Caso o campo da iteração atual não esteja
             * vazio, passe para a próxima iteração.
             */
            if ($this.val() !== '') {
              $this.removeClass('is-not-valid');
              return;
            };

            /**
             * Caso algum campo esteja inválido,
             * previna a submissão do formulário.
             */
            event.preventDefault();
  
            $this.addClass('is-not-valid');
  
            if (!$this.attr('data-error')) return;
  
            /**
             * Criar a mensagem de erro após o campo.
             */
            $('<div>', { 'class': 'is-not-valid-error-container' })
              .append($('<span>', { 'text': $this.attr('data-error') }))
              .insertAfter($this)
            ;
          })
        ;
      });
    });
  });
}(jQuery));
.is-not-valid {
  border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div>
    <label>
      Seu nome: <br>
      <input type="text" data-error="Qual o seu nome?" required>
    </label>
  </div>
  <div>
    <label>
      Sua idade: <br>
      <input type="number" data-error="Qual a sua idade?" required>
    </label>
  </div>
  <div>
    <label>
      Seu estado: <br>
      <select data-error="Qual o seu estado?" required>
        <option value="">Selecione uma opção</option>
        <option value="MG">MG</option>
        <option value="SP">SP</option>
        <option value="RJ">RJ</option>
      </select>
    </label>
  </div>
  <div>
    <br>
    <input type="submit" value="Enviar (ou testar :p)">
  </div>
</form>

Em tese, o script procura por input's que tenham o atributo required.
Caso este campo esteja vazio, ele adiciona uma classe (is-not-valid), e se tiver um atributo data-error="Erro que irá aparecer", o erro irá aparecer após o campo.

Veja o funcionamento do código acima, e não esqueça de testá-lo. Vale frisar que você pode fazer modificações a fim de torná-lo válido para a sua aplicação.

Reitero também que para o seu funcionamento, você precisará do jQuery no seu projeto (ou desenvolver um código com a mesma ideia livre dessa biblioteca).

Agora é com você! :D

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .