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.
JavaScript
x
126
126
1
@(form:Form[User2])2
3
<!DOCTYPE html>4
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">5
<head>6
<meta charset="UTF-8">7
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">8
<meta name="viewport" content="width=device-width,initial-scale=1">9
<title>HTML Test</title>10
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">11
<!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"-->12
<style type="text/css">13
14
html, body{height:100%; margin:0;padding:0}15
<!-- this centers the texts fields -->16
.center-form {17
width:100%;18
margin:auto;19
position:relative;20
top:50%;21
transform: translateY(-50%)22
}23
24
25
</style>26
<script>27
/*this function works fine and puts the text cursor on first text field*/28
function setup(){29
var textInput;30
textInput = document.getElementById('first-name');31
textInput.focus();32
}33
var firstName;34
firstName = document.getElementById('first-name');35
36
/*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*/37
function validateFirstName(){38
var name = firstName.value;39
if (name.length <= 0) {40
alert("error");41
firstName.focus();42
}43
}44
45
window.addEventListener('load',setup,false);46
47
firstName.addEventListener('blur',validateFirstName,false);48
49
</script>50
</head>51
<body>52
53
<div class="container center-form" >54
55
<!-- for medium and large screens,56
First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column-->57
58
<div class="row" >59
<!--empty column-->60
<div class="col-md-4 col-lg-4" ></div>61
62
<!--logo column-->63
<!--div class="col-md-4 col-lg-4" >64
<div>65
<img src="@routes.Assets.at("images/somelogo.png")" alt="Logo" height="64" width="303">66
</div>67
</div-->68
<!--empty column-->69
<div class="col-md-4 col-lg-4"></div>70
</div>71
72
<!-- for medium and large screens,73
Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). -->74
<div class="row" >75
<!--empty column-->76
<div class="col-md-4 col-lg-4"></div>77
78
<!--form-->79
<div class="col-md-4 col-lg-4">80
81
<form onsubmit='return onSubmit(this)'>82
<div class="form-group">83
<label for="first-name">First Name</label>84
<input type="text" class="form-control" id="first-name" value="@form("name").value" required>85
</div>86
87
<div class="form-group">88
<label for="last-name">Last Name</label>89
<input type="text" class="form-control" id="last-name" value="@form("name").value" required>90
</div>91
92
<div class="form-group">93
<label for="email">Email</label>94
<input type="email" class="form-control" id="email" value="@form("email").value" required>95
</div>96
<div class="form-group">97
<label for="password">Password</label>98
<input type="password" class="form-control" id="password" required>99
</div>100
<div class="form-group">101
<label for="confirm-password">Confirm password</label>102
<input type="password" class="form-control" id="confirm-password" required>103
</div>104
105
<div class="form-group">106
<label for="street-name">Street Name</label>107
<input type="text" class="form-control" id="street-name" required>108
</div>109
110
<div class="form-group">111
<label for="country">Country</label>112
<input type="text" class="form-control" id="country" required>113
</div>114
115
<button type="submit" class="btn btn-primary">Sign Up</button>116
</form>117
</div>118
<!--empty column-->119
<div class="col-md-4 col-lg-4"></div>120
</div>121
</div>122
<!--script src="@routes.Assets.at("javascripts/jquery-1.9.0.min")"></script-->123
<!--script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script-->124
</body>125
</html>126
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