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>
Advertisement
Answer
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