Paul Posted May 18, 2011 Share Posted May 18, 2011 Hi everyone, I know that this isn't a JS forum, but I have tried the following piece of basic form validation and it hasn't worked. Does anyone have any ideas or can recommend a good JS forum? Cheers Paul <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fabric quantity enquiry</title> <script type="text/javascript"> function drop_onblur() { var drop = document.form1.drop; if (isNaN(drop.value) == true) { alert("Please enter a valid number"); drop.focus(); } } </script> </head> <body> <h1>Fabric Quantity Enquiry</h1> <h2>Curtains</h2> <form name="fabric_enquiry_curtains"> <p>Drop (cm): <input name="drop" onblur="drop_onblur()" type="text" size="10" maxlength="10" /></p> </form> </body> </html> Link to comment Share on other sites More sharing options...
Larry Posted May 18, 2011 Share Posted May 18, 2011 What does "it doesn't work" mean? What does happen that shouldn't? What doesn't happen that should? What browser(s) have you tried this in? What debugging steps have you taken and what were the results? It's possible/probably the problem is here: var drop = document.form1.drop; as your form is not named "form1". Link to comment Share on other sites More sharing options...
HartleySan Posted May 18, 2011 Share Posted May 18, 2011 Larry's exactly right. Your form is not called form1. It's called fabric_enquiry_curtains. Change the line Larry mentioned to the following: var drop = document.fabric_enquiry_curtains.drop; It'll work then. You can also use the following: var drop = document.forms[0].drop; For more info on forms in JS, see the following: http://www.quirksmode.org/js/forms.html By the way, both Firefox and Chrome have awesome JS debuggers. FF's is called Firebug, and you need to install it as a separate extension. I actually prefer Chrome's anyway, but they're both awesome. As a note to Larry, why don't you start a JS forum of some type? I know you don't have any JS books (yet), but I think a lot of people have questions about JS, so we need somewhere to go. Also, Paul, whenever possible, try to separate your JS from your HTML. It's not a good idea to call JS functions from inline HTML tags. You might want to consider something like the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fabric quantity enquiry</title> </head> <body> <h1>Fabric Quantity Enquiry</h1> <h2>Curtains</h2> <form name="fabric_enquiry_curtains"> <p>Drop (cm): <input name="drop" type="text" size="10" maxlength="10" /></p> </form> <script type="text/javascript"> var drop = document.forms[0].drop; drop.onblur = drop_onblur; function drop_onblur() { if (isNaN(drop.value) == true) { alert("Please enter a valid number"); drop.focus(); } } </script> </body> </html> Please notice a couple of things: 1) The JS is after the HTML. This is a good thing. It's faster for loading pages, and it gives the JS DOM full access to the page. 2) It separates your structure (HTML) from your functionality (JS). This is also good, as it makes it easier to read and edit code. Also, you don't need the inline function call anymore. Well, hope that helps. Link to comment Share on other sites More sharing options...
Paul Posted May 19, 2011 Author Share Posted May 19, 2011 Thanks gents for the info. Larry. Apologies, 'it doesn't work' isn't the most helpful of comments. I'll be more informative in future. HartleySan. I like the idea of a JS forum. I felt almost guilty posting it here. I use Firebug for HTML and CSS and it's a cracking add-on. Didn't know you could use it for debugging. I'll check it out. I see your points about inline, however would I be correct in saying that the best place for lots of JS is in a seperate file referenced from the <head>, much the same as CSS? Paul Link to comment Share on other sites More sharing options...
HartleySan Posted May 19, 2011 Share Posted May 19, 2011 Indeed, just like CSS, a separate file would be best. For one, JS and CSS files are automatically cached, and assuming they're not changed, they will never have to be reloaded once someone has visited your page. Also, keeping the files separate really helps separate everything, and keeps it easy to differentiate between your structure (HTML), presentation (CSS) and functionality (JS). I usually post JS queries in the Ajax forum, as Ajax is somewhat related (but the board is far less frequented). The truth is, if you want a quick answer, this is probably the best board to post on. Link to comment Share on other sites More sharing options...
Antonio Conte Posted May 19, 2011 Share Posted May 19, 2011 Btw. Check out jQuery validate UI. It provides most of the checks you will every need. Sooo easy to implement. 1 Link to comment Share on other sites More sharing options...
Recommended Posts