StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Three problems:</p> <ol> <li><p>It's <code>getElementById</code> (note the <code>t</code>), not <code>geElementById</code>.</p></li> <li><p>You're missing the ending <code>}</code> on your function.</p></li> <li><p>Your closing tag for the form is <code></from></code>, not <code></form></code></p></li> </ol> <p>Your browser was probably telling you about at least the first two: In all modern browsers, there's a full set of development/debugging tools. For IE and Chrome (at least), just press F12. For others, look in the menus.</p> <p>Fix those and it works: <a href="http://jsbin.com/ucezij/3" rel="nofollow">Live Copy</a> | <a href="http://jsbin.com/ucezij/3/edit" rel="nofollow">Live Source</a></p> <pre><code><!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Example</title> </head> <body> <form name="signup" action="singup_i" method="post"> First name:<input type="text" id="fn" onblur="validatebox()" name="fn" size="15"/> <label id="error_fn"></label> <input type="submit" value="submit"> <input type="reset" value="reset"> </from> <script> function validatebox() { var fn = document.getElementById("fn").value; if (fn == null || fn == "") { document.getElementById("error_fn").innerHTML = "please fill your first name"; document.getElementById("error_fn").style.color = "red"; } else { document.getElementById("error_fn").innerHTML = "OK"; document.getElementById("error_fn").style.color = "green"; } } </script> </body> </html> </code></pre> <p>Note that I've reformatted the function code a bit, so it's easier to see the blocks (and therefore see the ending <code>}</code>).</p> <p>But can I suggest not looking up the <code>error_fn</code> repeatedly, and not using a <code>label</code> element for something other than labelling a field: <a href="http://jsbin.com/ucezij/4" rel="nofollow">Live Copy</a> | <a href="http://jsbin.com/ucezij/4/edit" rel="nofollow">Live Source</a></p> <pre><code><form name="signup" action="singup_i" method="post"> First name:<input type="text" id="fn" onblur="validatebox()" name="fn" size="15"/> <span id="error_fn"></span> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> <script> function validatebox() { var fn = document.getElementById("fn").value; var err = document.getElementById("error_fn"); if (fn == null || fn == "") { err.innerHTML = "please fill your first name"; err.style.color = "red"; } else { err.innerHTML = "OK"; err.style.color = "green"; } } </script> </code></pre> <p>Finally, <code>fn</code> will never be <code>null</code>, because the <code>value</code> property of a text field will never be <code>null</code>; it's always a string. The string may be blank. In this case, the easiest test would just be <code>if (!fn) { /* missing */ } else { /* present */}</code>, which will test <code>fn</code> to see if it's <code>null</code>, <code>undefined</code>, <code>0</code>, <code>""</code>, <code>false</code>, or <code>NaN</code> (of which, it can only be <code>""</code>, because again <code>value</code> is always a string). Of course, <code>" "</code> (a space) would get past that.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload