Leaving the input in focus after javascript valid?

Question

I implemented a simple valid 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 what was set in javascript, I already removed the required and still does not work follow the code I am 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>

Answer 1

Just vc 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>

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>

Answer 2

I’ve had this problem in some specific sailing, and another one worked.

I decided to add one timeout, and then set the focus in the field, so:

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

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