Reputation: 13
I have a simple html login form which is validated with javascript before its submitted. When I attempt to submit the form with the validation conditions unmet I get my validation alerts as per usual. However when they are met the submit button becomes unresponsive.
Here's the html code for the form:
<form action="staff_login_process.php" class="myform" enctype="multipart/form-data" method="post" onsubmit="return validLog()">
<fieldset>
<div id="apply_width">
<div id="field_area">
<h2 class="white">Login</h2>
<label for="username">Username<span>*</span>
</label> <input type="text" name="email" value="" id="username" class="float_right" />
<label for="password">Password<span>*</span>
</label><input type="password" name="password" value="" id="password" class="float_right" />
<a class="red" href="">Forgot Password</a>
</div>
<input type="submit" value="Login" class="button" />
</div>
</fieldset>
</form>
and here's the Javascript code which takes care of the validation:
function validLog() {
var username = document.getElementById('username');
var password = document.getElementById('password');
if(notEmpty(username, "Please enter username")){
if(notEmpty(password, "Please enter password")){
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
I'm at a loss for what to try to get this working and can't spot where I've gone wrong here so any advice would be great.
Thanks
Upvotes: 1
Views: 205
Reputation: 123387
since notEmpty
function return itself true
or false
, try simply
function validLog() {
var username = document.getElementById('username'),
password = document.getElementById('password');
return notEmpty(username, "Please enter username")
&& notEmpty(password, "Please enter password");
}
so the form will be submitted if both your values are not empty
Upvotes: 1
Reputation: 47667
Your validLog()
function ALWAYS returns false
Change
if(notEmpty(username, "Please enter username")){
if(notEmpty(password, "Please enter password")) {
return false;
}
}
return true;
Upvotes: 2