Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como por asteristico vermelho no required

Tenho uma duvida, quando estou preenchendo algum formulário na internet e pulo (sem querer), é apontado que o campo é obrigatório por um asteristico vermelho, ou quando tento enviar o formulario o required é ativado e eu retorno para os campos obrigatórios, porém com o * em vermelho nos campos. Com faz isso no HTML?

4 respostas

Oi, Vitor, tudo bem?

Para adicionar os asteriscos, você pode adicionar normalmente, ao lado de cada campo.: <label for="nomesobrenome">Nome e sobrenome * </label>, por exemplo. Porém, não compreendi muito bem e posso estar fugindo, me fale se é isso. Mas caso deseje mudar a mensagem que o HTML5 passa por default uma mensagem mas você pode modifica-la, assim:

<label for="nomesobrenome">Nome e sobrenome * </label>
        <input
          type="text"
          id="nomesobrenome"
          class="input-padrao"
          required=""
          oninvalid="this.setCustomValidity('Por favor, entre com um nome e sobrenome')"
          oninput="setCustomValidity('')"
        />

Oi Lais, bom dia e obrigado pela resposta, nossa quanta xp ai hein, divide comigo? rsrs. Então é mais ou menos isso sim, com certeza vc ja viu uns formulários onde se vc tentar enviar o formulário sem preencher todos os campos, a pagina irá te retornar para os campos que devem ser preenchidos e estes estarão com um sinal de asteristico vermelho (vejo muito isso sendo usado, acredito que possa ser até um padrão utilizado), mas deixa eu ver se entendi... no required="*" (se eu por o * entre as aspas, ja daria o resultado que eu preciso?). Posso estar enganado, mas vc esta usando javascript ai? Parece estar usando DOM ou isso é só HTML mesmo? É porque eu ainda não cheguei no curso de javascript.

solução!

Oi, Vitor, hahahaha é muito trabalho.

Então, no html5 isso já vem de forma automática com uso o required, tanto que no form do curso se os campos estiverem vazios, ele fica em vermelho e aparece uma mensagem em inglês informando. A questão do asterisco é que culturalmente já é sabido que se um campo o tem é porque ele precisa se preenchido, mas o programador precisar estar precavido para caso o usuário queira enviar um formulário com campos obrigatórios vazios ou fora do padrão. E sim, é uma linha em JS que é utilizada para mudar a mensagem padrão.

Para fazer validações, você vai precisar Javascript. Além do cursos que irá fazer, temos um focado somente em validações de formulário, esse aqui: https://cursos.alura.com.br/course/validacao-javascript-html5 guarda ele, que depois que você fizer os cursos básico de Js, você faz esse e deixa as suas validações seguras.

Espero ter te ajudado e bons estudos!

Esse curso esta no meu plano de estudo, jaja chego la rsrs e muito obrigado pela atenção.