Message notification, similar to ALERT

Asked

Viewed 80 times

0

My question is:

When clicking the send button If the name field is empty, notify in message in front of the input: message "Name not specified. Enter the name to access",

function validar() {
  var nome = form1.nome.value;
  var senha = form1.senha.value;

  if (nome == "") {
    alert ('Nome não informado. Digite o nome para ter acesso');
    form1.nome.focus();

    return false;
  }
}
<html>

<head>
    <title>Java validação</title>
</head>

<body>
    <fieldset>
        <legend> Informe os dados de login </legend>
        <form name="form1" action="enviar.php" method="post">
            Nome:
            <input name="nome" type="text"><br /><br />

            Senha:
            <input name="senha" type="password"><br /><br />

            <input type="submit" onclick="return validar()">
        </form>
    </fieldset>
</body>

</html>

I put an Alert, but it’s the way I know it.

javascript html

  • Because you don’t put one * and says it is mandatory? Better than wasting time making error message. By good UX avoid that the user makes the mistake, and do not focus on making a message saying that it error ;)

  • the requirement is a message even.

2 answers

0

Would that be?

function validar() {
  var nome = form1.nome.value;
  var senha = form1.senha.value;

  if (nome == "") {
    $('#balao').html("Nome não informado. Digite o nome para ter acesso <br><input type=button oneclick=$('#balao').hide() value=ok>");
    mostrarMenu('form1');
    return false;
  }
}
function getPosicaoElemento(elemID){
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf('Mac') != -1 &&
        typeof document.body.leftMargin != 'undefined') {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

function mostrarMenu(atual){
    delay=setTimeout(function(){
    atual_menu = document.getElementById('balao');

        var X = getPosicaoElemento(atual.id).left + 35;
        var Y = getPosicaoElemento(atual.id).top + 35;
        
        $('#balao').css('display','none');
        
        atual_menu.style.top = Y.toString() + 'px';
        atual_menu.style.left = X.toString() + 'px';
        atual_menu.style.display = 'block';
        
        
    },300)
}

window.onload = function () {

    document.addEventListener('click',function(e){
        esconde_menu();
    })
}

function esconde_menu(){
    $('#balao').css('display','none'); 
}
#balao{
  position:absolute;
  display:none;
  background-color:red;
  border-radius:5px;
  padding:5px;
  text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
    <title>Java validação</title>
</head>

<body>
    <fieldset>
        <legend> Informe os dados de login </legend>
        <form id=form1 name="form1" action="" method="post">
            Nome:
            <input name="nome" type="text"><br /><br />

            Senha:
            <input name="senha" type="password"><br /><br />

            <input type="submit" onclick="return validar()">
        </form>
    </fieldset>

    <div id=balao>oi</div>
</body>

</html>

0

In addition the forms of validation by means of Javascript already posted, I will add a direct validation suggestion by HTML

The standard way to display an error message on HTML are with the attributes required and pattern. The attribute required requires the user to enter something in the input, while the attribute pattern requires the user to type something that matches a regular expression.

Also. with the attribute title you can describe what is the validation rule of pattern for the user:

<html>

<head>
    <title>Java validação</title>
</head>

<body>
    <fieldset>
        <legend> Informe os dados de login </legend>
        <form name="form1" action="enviar.php" method="post">
            Nome:
            <input name="nome" type="text" required><br /><br />

            Senha:
            <input name="senha" type="password" required pattern=".{6,}" title="6 caracteres ou mais"><br /><br />

            <input type="submit">
        </form>
    </fieldset>
</body>

</html>

  • Apparently yes, Ronaldo. Thanks for the help and sorry otherwise I was very clear, it’s because I’m new to javascript.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.