Leaving input in focus after javascript validation?

Question

Leaving input in focus after javascript validation?

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I implemented a simple validation to check if the input matches the rules and if it is negative it should be in focus to change the data, but the focus is not working, it leaves the next item in focus and not the one that was set in the javascript, I already removed the required one and it does not work, it follows the code I'm using.

function verificaForm() {
    //var doc = document.getElementById('txtName').value;
    //alert(doc);
    if (document.formulario.txtName.value === "") {
        alert('Campo nome vazio');
        //document.getElementById('txtName').focus();
        var nome = document.getElementById('txtName');
        document.getElementById('txtName').focus();
        return false;
    }

    return true;
}

<form class="form" name="formulario" method="post">
   <div class="form-control">
      <label for="txtName">Nome:</label>
      <input type="text" id="txtName" name="txtName">
   </div>
   <div class="form-control">
      <label for="txtSobrenome">Sobre-nome</label>
      <input type="text" id="txtSobrenome" name="txtSobrenome">
   </div>
   <div class="form-control">
      <label for="txtIdade">Idade</label>
      <input type="text" id="txtIdade" name="txtIdade">
   </div>
   <div class="form-control">
      <button class="btn btn-danger" onclick="verificaForm()">Verificar ...</button>
   </div>
</form>

javascript html

asked by anonymous 30.03.2017 / 14:22

2 answers

1

I already had this problem in some specific surf, and another one worked.

I resolved by adding a timeout , and then setting the focus in the field, like this:

window.setTimeout(function () { 
    document.getElementById('txtName').focus(); 
}, 0);

I think it will solve your problem too, since your code seems to be right.

30.03.2017 / 14:49

Laravel Authentication 5.4 Best way to apply the concept of object orientation

score 3 · Accepted Answer

Just put type="button" on the form button:

function verificaForm() {
    //var doc = document.getElementById('txtName').value;
    //alert(doc);
    if (document.formulario.txtName.value === "") {
        alert('Campo nome vazio');
        //document.getElementById('txtName').focus();
        var nome = document.getElementById('txtName');
        document.getElementById('txtName').focus();
        return false;
    }

    return true;
}

<form class="form" name="formulario" method="post">
   <div class="form-control">
      <label for="txtName">Nome:</label>
      <input type="text" id="txtName" name="txtName">
   </div>
   <div class="form-control">
      <label for="txtSobrenome">Sobre-nome</label>
      <input type="text" id="txtSobrenome" name="txtSobrenome">
   </div>
   <div class="form-control">
      <label for="txtIdade">Idade</label>
      <input type="text" id="txtIdade" name="txtIdade">
   </div>
   <div class="form-control">
      <button  type="button" class="btn btn-danger" onclick="verificaForm()">Verificar ...</button>
   </div>
</form>

You can also put document.getElementById("txtName").style.background = "#D4D4D4"; to better visualize the field in focus. See

function verificaForm() {
    //var doc = document.getElementById('txtName').value;
    //alert(doc);
    if (document.formulario.txtName.value === "") {
        alert('Campo nome vazio');
        //document.getElementById('txtName').focus();
        var nome = document.getElementById('txtName');
        document.getElementById('txtName').focus();
        document.getElementById("txtName").style.background = "#D4D4D4";
        return false;
    }

    return true;
}

<form class="form" name="formulario" method="post">
   <div class="form-control">
      <label for="txtName">Nome:</label>
      <input type="text" id="txtName" name="txtName">
   </div>
   <div class="form-control">
      <label for="txtSobrenome">Sobre-nome</label>
      <input type="text" id="txtSobrenome" name="txtSobrenome">
   </div>
   <div class="form-control">
      <label for="txtIdade">Idade</label>
      <input type="text" id="txtIdade" name="txtIdade">
   </div>
   <div class="form-control">
      <button  type="button" class="btn btn-danger" onclick="verificaForm()">Verificar ...</button>
   </div>
</form>