/    Sign up×
Community /Pin to ProfileBookmark

Form Validation with getElementById

Copy linkTweet thisAlerts:
May 27.2010

I am new to JavaScript. I have a form element that accepts a name. If the user leaves the name field, it should give an error in the div under the element:

[code=html]<p><label>Name: <input name = “name” id = “name” type = “text” size = “25” onblur = ‘isEmpty(this.id)’ /></label></p>
<div id = “nameErrDisplay” class = ‘validator’>&nbsp;</div>[/code]

I’m sure there are errors in both my HTML and my function:

[CODE]function isEmpty(id) {
if(document.getElementById(id).value == “”) {
document.getElementById(“nameErrDisplay”) = “Please enter something here.”;
}
}[/CODE]

Thanks in advance!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMay 27.2010 — <i>
</i>document.getElementById("nameErrDisplay")[B][COLOR="Blue"].innerHTML[/COLOR][/B] = "Please enter something here.";


Note: make sure that[B] id [/B][I]is unique on document[/I]. I suspect that you have used the same id for several DIVs. Or not? Post a little bit more of your code. HTML included.
Copy linkTweet thisAlerts:
@rbraggauthorMay 27.2010 — Kor, thanks for your reply. That works great! I took your advice and used the id name. How would I remove the message if a value was entered into the field?
Copy linkTweet thisAlerts:
@KorMay 27.2010 — <i>
</i>document.getElementById("nameErrDisplay").innerHTML="";
Copy linkTweet thisAlerts:
@rbraggauthorMay 27.2010 — Would I write a new function for that or could I somehow incorporate into an else statement?
Copy linkTweet thisAlerts:
@KorMay 27.2010 — OK, let's make it more dynamic. In fact you don't need the ids, it is enough to refer in DOM tree the next DIV, starting from the INPUT, using nextSibling tests
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function isEmpty(field){
var nextDiv=field.parentNode.parentNode.nextSibling;
while(nextDiv.nodeName!='DIV'){
nextDiv=nextDiv.nextSibling;
}
nextDiv.innerHTML=field.value.length&lt;1?'Please enter something here.':'&amp;nbsp;';
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;label&gt;Name: &lt;input name="name" type="text" size="25" onblur="isEmpty(this)"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;div class="validator"&gt;&amp;nbsp;&lt;/div&gt;
&lt;br&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address" type="text" size="25" onblur="isEmpty(this)"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;div class="validator"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @rbragg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...