-1
I am trying to put a required field message, at the moment I can only put in an input, the idea is to put in everyone and when it suffers the action of a click on the message, the tag that is created dynamically will be deleted.
With the script below, when clicking inside an input and then clicking outside the input box without having filled anything, the required field message will appear and when clicking on that message, it will be deleted.
However, if I click on any field still with the active message, all the elements that are clicked will be deleted.
$('#nome').blur(function(event){
event.preventDefault();
//esse if evita ficar aparecendo varias mensagens
if($('.triangulo').length){
return;
}
// esse if adiciona a tag p com o conteúdo e atributos
if($(this).val().length <= 0){
var p = $("<p>").text("Campo obrigatório").attr("class", "triangulo").addClass('caixa').attr("id","remover");
var nome = $("form");
nome.append(p);
}
});
//evento de click para remover a mensagem
$('form').click(function(e){
var removerCampoRequerido = $("p").attr('id');
if("remover" == removerCampoRequerido){
e.target.remove();
}
});
The form
<form id="formulario">
<div id="tag" style="width:60%; margin:0 auto">
<label for="nome">Nome:</label>
<input name="nome" type="text" placeholder="Nome" id="nome" class="trazer-nome">
<label for="cpf">CPF:</label>
<input name="cpf" type="text" placeholder="CPF" id="cpf">
<label for="email">E-mail:</label>
<input name="email" type="text" placeholder="Email" id="email">
</form>
The styles to compose the message
<style>
.caixa {
background:blue;
color: #fff;
padding: 1px;
position: relative;
width: 130px;
opacity: 0.70;
margin: -30px 0 0 370px;
}
.triangulo:before {
border: 10px solid transparent;
border-bottom-color: blue;
content: "";
left: 20px;
top: -20px;
position: absolute;
}
</style>
I’m making use of jquery.
It would not be better to create a function to hide the message, and set this function in the "onclick" component event ?
– Brenno Segolim
Hide the "p" tag in css, and in jquery listen to the click event by doing a "show"? @Brennosegolim
– Medivh
But in that case you would have to add the "p" tag across the fields or multiple "span"
– Medivh