Client-side validation with JavaScript not working

Question

I have been trying different methods and looking in many different places, and it really looks like the following code should work. I am stumped as to why it isn't... I am a novice to html and JavaScript, so I'm guessing I keep overlooking something I did wrong? If so, hopefully someone can point it out.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
    function validateUsername() {
        if (document.getElementById("username") == "") {
           document.registrationform.username.style.background = 'Yellow';
        }
    }
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php"> 

    <div class="formlabel">*Username:</div>
    <div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
    <div style="float:left;">
        <input type="submit" value="Submit" />
    </div>
</form>
</body>
</html>

When I leave it blank and click out of it, it does not change color like I'd like. Why?

This is client-side validation (because it happens in the browser). In addition to client-side validation, you must also implement server-side validation. It appears you're using PHP, so you'd have to do it there. — josh3736, Jul 09 '12 at 02:09
Yes I'll definitely have server-side validation for everything, including a mysql query to make sure username is UNIQUE,but wanted to make things easier for those with javascript enabled. That's my next step! — dominicsvatos, Jul 09 '12 at 02:23

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

document.getElementById("username")

should be

document.getElementById("username").value

That should get you started. However, your implementation won't catch cases where the user has entered a space (" ") into the textbox. For that, you'll use the trim function to get rid of the spaces:

// Remove spaces at front/back of value in textbox
document.getElementById("username").value.trim();

edited May 23 '17 at 10:34

Community

1
1

answered Jul 09 '12 at 02:07

Daniel Szabo

7,181
6
48
65

Oh hey, the .value was it. I'll now be able to extrapolate that to everything else, thank you so much. Also, I didn't realize there was a standard trim function, I was going to use .replace(/^\s+|\s+$/g, ''); I like .trim much better, thank you so much for both suggestions! :) – dominicsvatos Jul 09 '12 at 02:20
@dominicsvatos: No prob. I don't think certain flavors of IE support .trim yet. The link lists workarounds if req'd. – Daniel Szabo Jul 09 '12 at 03:45

score 0 · Answer 2 · answered Jul 09 '12 at 02:15

0

You can make life much easier if you pass a reference to the element from the listener:

<input type="text" ... onblur="validateUsername(this)">

Now your function is:

function validateUsername(element) {
    element.style.backgroundColor = (element.value == '')? 'yellow' : 'white';
}

answered Jul 09 '12 at 02:15

RobG

142,382
31
172
209

I always like things being much easier, so I appreciate this immensely. Thanks a ton – dominicsvatos Jul 09 '12 at 02:26

score 0 · Answer 3 · answered Jul 09 '12 at 02:15

Your code is a little messy. Closing ">" of form tag is missing too. Your code should be as follow.

    <html>
<head>
<script type="text/javascript">
<!--
function validateUsername() {
if (document.getElementById("username").value == "") {
document.registrationform.username.style.background = 'Yellow';
}
}
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php">

<div class="formlabel">*Username:</div>
<div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
<div style="float:left;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>

Thanks for the advice, I'll use the onsubmit as well. Thank you! — dominicsvatos, Jul 09 '12 at 02:24

Client-side validation with JavaScript not working

3 Answers3