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
– josh3736, Commented Jul 9, 2012 at 2: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
– dominicsvatos, Commented Jul 9, 2012 at 2:23

Community · Accepted Answer · 2017-05-23 10:34:29Z

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, 2017 at 10:34

CommunityBot

11 silver badge

answered Jul 9, 2012 at 2:07

Daniel Szabo

7,2817 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dominicsvatos Over a year ago

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! :)

Daniel Szabo Over a year ago

@dominicsvatos: No prob. I don't think certain flavors of IE support .trim yet. The link lists workarounds if req'd.

RobG · Accepted Answer · 2012-07-09 02:15:14Z

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 9, 2012 at 2:15

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

dominicsvatos Over a year ago

I always like things being much easier, so I appreciate this immensely. Thanks a ton

Jonas T · Accepted Answer · 2012-07-09 02:15:24Z

0

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>

answered Jul 9, 2012 at 2:15

Jonas T

3,0954 gold badges35 silver badges45 bronze badges

1 Comment

dominicsvatos Over a year ago

Thanks for the advice, I'll use the onsubmit as well. Thank you!

Collectives™ on Stack Overflow

Client-side validation with JavaScript not working

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related