javascript, getelementbyname and focus

Question

I am trying to create function that will look at the username if it is not valid send an alert to the user, clear the username field, and put the username field back into focus. I am trying to do this all with the getElementsBynName() function. It is all working with the exception of getting the field back into focus. My code is below. Does anyone have any suggestions.

function uchecker(uname)
{
var validUname = uname.search(/^\[email protected]$/);
if(validUname != 0)
{
    alert("You have entered an invalid username. \n The username must be a valid @sju.edu    email    address value " + document.getElementsByName('uname')[0].value);
    document.getElementsByName('uname')[0].value = null;
    document.getElementsByName('uname')[0].focus();

    /I have also tried  document.getElementsByName('uname').focus, document.getElementsByName('uname')[0].value.focus();
}

}

So it appears that before the Java script runs the field that is in focus changes to the next field, my password input box...which also has its own validation function. I there a way to get my javascript code to run for my username field before the next textbox (password box) is takes focus?

Flow

It is document.getElementsByName('uname')[0].focus() I think. – Freethinker

I have tried that without any luck – Flow

Maybe this isn't but try asigning an empty string to the inputbox instead of null: document.getElementsByName('uname')[0].value ='' and use the focus() method. – Freethinker

More semantic than search would be if (/^\[email protected]$/.test(uname)). Also, completely deleting user input is very unfriendly. Much nicer to advise of the error and leave it to them to correct. – Broncho

What is uname? Is it a string? Reference to an element? Value of an element? …? – Broncho

uname is the name attribute of a input textbox – Flow

If the listener is on the element, you can get it as this within a listener attached by addEventListener, or passing this in an inline listener. Note that a strategy of putting focus on the element until it passes validation will seriously frustrate users, especially when combined with an alert and called onblur. The alert causes the element to loose focus, calling the validation, which clears the element, calls the alert, causes it to lose focus, which calls validation… ad infinitum. – Broncho

Yes that is eexactly the issue I am getting...is there a better way – Flow

Answer 1

JavaScript:

document.getElementsByName('name')[0].focus()

Jquery:

$("#name")[0].focus()

function valid(){
  var nameObj = document.getElementsByName("testing");
  for(var i=0; i<nameObj.length; i++){
    if(nameObj[i].value == ""){
      //$(nameObj)[i].focus();  //Jquery
      nameObj[i].focus();       //Js
      alert("Please Fill all the text boxes");
      break;
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.input-sm{
  width:200px
}
</style>
<input name="testing" class="form-control input-sm" type="text" id="test_01"/><br> 

<input name="testing" class="form-control input-sm" type="text" id="test_02"/><br>
<input name="testing" class="form-control input-sm" type="text" id="test_03"/><br>
<input name="testing" class="form-control input-sm" type="text" id="test_04"/><br>
<input type="button" class="btn btn-primary" onclick ="valid()" value="Click Me"/>

Tezel

Answer 2

I believe this might be a solution to your problem:

function onUnameFocus() {
    var uname = document.getElementsByName("uname")[0];

    uname.onblur = function () {
        var isValidUname = uname.value.search(/^\[email protected]$/);

        if (uname.value !== "" && isValidUname) {
            uname.onblur = null;
            alert("You have entered an invalid username. \n The username must be a valid @sju.edu    email    address value " + uname.value);
            uname.value = "";
            setTimeout(function () { uname.focus(); }, 1);
        }
    }
};

<input name="uname" onfocus="onUnameFocus()" />

It sets a onfocus handle which in turn sets an onblur handle. This is been done to prevent the code from looping infinitely when it has detected an invalid username.

It also checks if the uname field is empty in order not the trap the user in there when no username has been chosen. And it adds a small delay to the focus event to ensure that it fires after the alert window has been closed.

These scripts have been tested on Chrome, Firefox and Internet Explorer 11.

Clot

Answer 3

Presumably you have controls in a form like:

<form ...>
  Username: <input type="text" name="uname" onblur="uchecker(this)">
  <span id="unameMsg"></span>
  <br>
  Password: <input type="password" name="password">
  ...
</form>

so the checker function can be:

function uchecker(element) {

  // If fail validation, show message, clear input, return focus      
  if (!/^\[email protected]$/.test(element.value)) {
    document.getElementById(element.name + 'Msg').innerHTML = 'You have entered an invalid username. ...';
    element.value = '';
    element.focus();

  // Otherwise, clear message
  } else {
    document.getElementById(element.name + 'Msg').innerHTML = '';
  }
}

But this locks the user into completing the username field before being able to do anything else.

Broncho

Answer 4

This worked for me, with Angular 4. I had to autofocus on a text field given by a library I was using.

I used the setTimeout inside an event change provided by the library.

But you could use it with onLoad or any event triggers as you need.

setTimeout(() => {
  document.getElementsByName('search-text')[0].focus();
}, 100);

<input name="search-text"/>

Wilkes