atrum Posted October 30, 2010 Share Posted October 30, 2010 ok, so here is the problem. I have an html form that I am trying to validate and print a message to a span html tag if a field is blank. The issue I am encountering is that nothing gets written to the innerHTML of the span tag id. Heres the mark up. <html> <head> <script type="text/javascript" src="/js/test.js"></script> </head> <body> <form name="form" action="classtest.php" method="post"> <div> <label for="txt_username">User Name: </label> <input type="text" name="txt_username"/> <span id="user_help" class="help"></span> </div> <div> <label for="txt_password">Password: </label> <input type="text" name="txt_password" /> <span id="password_help" class="help"></span> </div> <div> <label for="txt_confirm_password">Confirm Password: </label> <input type="text" name="txt_confirm_password" /> <span id="confirm_password_help" class="help"></span> </div> <div> <label for="txt_email">Email: </label> <input type="text" name="txt_email" /> <span id="email_help" class="help"></span> </div> <div> <label for="txt_confirm_email">Confirm Email: </label> <input type="text" name="txt_confirm_email" /> <span id="confirm_email_help" class="help"></span> </div> <div> <label for="txt_firstname">First Name: </label> <input type="text" name="txt_firstname" /> <span id="firstname_help" class="help"></span> </div> <div> <label for="txt_lastname">Last Name: </label> <input type="text" name="txt_lastname" /> <span id="lastname_help" class="help"></span> </div> <div> <input type="hidden" name="formid" value="id01" /> <input name="sendData" type="button" value="submit" onclick="valForm(this.form)"/> </div> </form> </body> </html> And here is the javascript. function checkEmpty(input, helpText){ if(input.value.length==0){ if(helpText != null){ helpText.innerHTML = "Please enter a value."; return false; } }else{ return true; } } function valForm(form){ //Verify that none of the fields are blank. if(checkEmpty(form["txt_username"], form["user_help"])&& checkEmpty(form["txt_password"], form["password_help"])&& checkEmpty(form["txt_confirm_password"], form["confirm_password_help"])&& checkEmpty(form["txt_email"], form["email_help"])&& checkEmpty(form["txt_confirm_email"], form["confirm_email_help"])&& checkEmpty(form["txt_firstname"], form["firstname_help"])&& checkEmpty(form["txt_lastname"], form["lastname_help"])){ //Submit the form. form.submit(); }else{ //Display the error. alert("shit broke"); } } I am using firebug to help me find any errors, but that's the other problem is that it says there are no errors. The page I am using can be accessed at this URL: http://icca.exiled-alliance.com/test.php When you click submit and any of the fields are blank, I have an alert box pop up to say the script shit the bed. and I have gotten an alert to pop up for each input that is blank as well. Just the innerHTML is giving me trouble. Any help any one can offer would be appreciated. Thanks, Atrum. Quote Link to comment Share on other sites More sharing options...
DavidAM Posted October 31, 2010 Share Posted October 31, 2010 I am NOT a JavaScript expert. But I discovered something last night that might be pertinent to your problem. You are passing to your CheckEmpty() function, the INPUT element and the SPAN element. At least, you think you are. Last night I discovered that LABEL elements are NOT children of the form, they are children of the containing DIV (in my case). I suspect that the SPAN elements are NOT children of the FORM, so you are not passing in an object. Someone let me know if I am wrong here. But it appears to me, an HTML FORM is not treated as a true container. I see this when I try to validate my HTML. The form fields (INPUT, SELECT, etc) must be inside a block level element (i.e. a DIV) or it will not validate even though the FORM itself is inside a DIV, I've had to put another DIV inside the FORM tags. How does that make sense? Sorry, I didn't mean to start a rant in your topic. Try adding an alert(form["user_help"]) just inside your valForm() function and see if it shows undefined. Quote Link to comment Share on other sites More sharing options...
atrum Posted October 31, 2010 Author Share Posted October 31, 2010 hmm, I added alert(form["user_help"]); to the valForm() and it comes up as undefined. function valForm(form){ alert(form["user_help"]); } So I am thinking your right about it not passing in span as part of the form object. Quote Link to comment Share on other sites More sharing options...
DavidAM Posted October 31, 2010 Share Posted October 31, 2010 I guess you will have to use someting like: function valForm(form){ //Verify that none of the fields are blank. if(checkEmpty(form["txt_username"], document.getElementById("user_help")&& Quote Link to comment Share on other sites More sharing options...
atrum Posted October 31, 2010 Author Share Posted October 31, 2010 Thanks for your help. That got me working. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.