Javascript function not working on blur event

Question

I have written a function which I expect should check if a text field is empty and if so should bring the focus back on it. The check is done when a user moves away from the text field (on blur). Unfortunately, the code isn't working. Why is it so? I am using playframework. The issue is in javascript code.

@(form:Form[User2])

<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML Test</title>
    <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
    <!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"-->
    <style type="text/css">

        html, body{height:100%; margin:0;padding:0}
<!-- this centers the texts fields  -->
.center-form {
  width:100%;
  margin:auto;
  position:relative;
  top:50%;
  transform: translateY(-50%)
}


</style>
<script>
/*this function works fine and puts the text cursor on first text field*/
    function setup(){
        var textInput;
        textInput = document.getElementById('first-name');
        textInput.focus();
    }
    var firstName;
    firstName = document.getElementById('first-name');

/*the problem is in this code. I check if the field is empty and if so, I call focus to put focus on that field*/
    function validateFirstName(){
        var name = firstName.value;
        if (name.length <= 0) {
        alert("error");
            firstName.focus();
        }
    }

    window.addEventListener('load',setup,false);

    firstName.addEventListener('blur',validateFirstName,false);

</script>
</head>
<body>

<div class="container center-form" >

    <!-- for medium and large screens,
    First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column-->

    <div class="row" >
        <!--empty column-->
        <div class="col-md-4 col-lg-4" ></div>

        <!--logo column-->
        <!--div class="col-md-4 col-lg-4" >
            <div>
                <img src="@routes.Assets.at("images/somelogo.png")" alt="Logo" height="64" width="303">
            </div>
        </div-->
        <!--empty column-->
        <div class="col-md-4 col-lg-4"></div>
        </div>

    <!-- for medium and large screens,
    Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). -->
        <div class="row" >
            <!--empty column-->
            <div class="col-md-4 col-lg-4"></div>

            <!--form-->
            <div class="col-md-4 col-lg-4">

            <form onsubmit='return onSubmit(this)'>
                    <div class="form-group">
                        <label for="first-name">First Name</label>
                        <input type="text" class="form-control" id="first-name" value="@form("name").value" required>
                    </div>

                    <div class="form-group">
                        <label for="last-name">Last Name</label>
                        <input type="text" class="form-control" id="last-name" value="@form("name").value" required>
                    </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" value="@form("email").value" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">Confirm password</label>
                        <input type="password" class="form-control" id="confirm-password" required>
                    </div>

                    <div class="form-group">
                        <label for="street-name">Street Name</label>
                        <input type="text" class="form-control" id="street-name" required>
                    </div>

                    <div class="form-group">
                        <label for="country">Country</label>
                        <input type="text" class="form-control" id="country" required>
                    </div>

                    <button type="submit" class="btn btn-primary">Sign Up</button>
                </form>
            </div>
            <!--empty column-->
            <div class="col-md-4 col-lg-4"></div>
        </div>
</div>
<!--script src="@routes.Assets.at("javascripts/jquery-1.9.0.min")"></script-->
<!--script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script-->
</body>
</html>

Answer 1

I've made this jsfiddle for you (I took the necessary code to create the example, so the html, css and scripts are a little bit different from yours).

I think it behaves as you'd like ;)

https://jsfiddle.net/f039z59o/2/

(function() {
  var name = document.getElementById('first-name');

  function setup() {
    name.select();
  }

  function validateFirstName() {
    if (name.value.length < 1) {
      name.select();
    }
  }
  document.addEventListener('ready', setup, false);
  name.addEventListener('blur', validateFirstName, false);
  setup();
})();

Answer 2

suggestion from Ibrahim worked - You should put firstName = document.get... and firstName.addEve... inside the load event listener (setup function)! ANYTHING THAT HAS SOMETHING TO DO WITH DOM MUST TO WAIT FOR THE DOM TO BE LOADED

Javascript function not working on blur event

Question

2 answers

solution1
0 2017-02-25 13:26:10

solution2
0 ACCPTED 2017-03-06 19:53:20

Javascript function not working on blur event

Question

2 answers

solution1 0 2017-02-25 13:26:10

solution2 0 ACCPTED 2017-03-06 19:53:20

solution1
0 2017-02-25 13:26:10

solution2
0 ACCPTED 2017-03-06 19:53:20