#1
  1. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2004
    Posts
    28
    Rep Power
    0

    Form validation works, field validation doesn't


    I just can't get javascript to return focus to an invalid textbox with onBlur, although via onSubmit everything is just fine, as well as with onClick="javascript:...".

    The onBlur call enters the function, but the focus jumps to the next object in tab sequence. Here's my code: (BTW, I see some folks are able to put their code in a special textarea? on this forum, but the option doesn't seem to be available as I enter my question)...
    Code:
    <script type="text/javascript">
    // --------< loader fn
    	function loader() {
    	    window.status="I'm in the function Loader";
    		document.getElementById('text1').value = "Start";
    		document.getElementById('text1').select();
    		document.getElementById('text1').focus();
    	}// ---------------------------------------------------	
    
    	function validText1(element) {
    		if (element.value.length == 0) {
    			alert("You need to type something into TextBox One");
    			document.getElementById("text1").focus();
    			return false;
    		}
    	}
    	
    	function validText2(element) {
    		if (element.value.length == 0)  {
    			alert("You need to type something into TextBox Two");
    			document.getElementById("text2").focus();
    			return false;
    		}
    	}
    	
    	function submitTest()  {
    		if (document.foo.text1.value == "test") {
    			alert("Type something besides the word test in TextBox1");
    			document.foo.text1.focus();
    			document.foo.text1.select();
    		}
    		return false //always 'false' because there's no followup form
    	}
    
    // -->
    </script>
    </head>
    
    <body onload="loader()" bgcolor="#FFFFFF" text="#000000">
    
    <p>&nbsp;</p>
    
    <form name="foo" return onSubmit="submitTest();"><div align="center">
    Enter up to eight characters in TextBox One
    <input type="text" id="text1" name="text1" maxlength="8" size="10"
     onBlur="return validText1(this)">
    <br />
    Enter up to eight characters in TextBox Two
    <input type="text" id="text2" name="text2" maxlength="8" size="10"
     onBlur="return validText2(this)">
    <p>&nbsp;</p>
    <input type="button" name=button1" value="Focus on TextBox One"
     onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">
     &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" id="submit" name="submit" value="Submit">
    
    </div> 
    </form>
    Last edited by Shadow Wizard; June 18th, 2005 at 09:45 AM. Reason: added [code] tags around code - please do it yourself next.
  2. #2
  3. Newton's Apple Wizard
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Location
    Los Angeles
    Posts
    1,662
    Rep Power
    63
    try onChange() instead of onBlur()
    If you found a post of mine helpful, please click on the on my post to add to my reputation.

  4. #3
  5. Newton's Apple Wizard
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Location
    Los Angeles
    Posts
    1,662
    Rep Power
    63
    I actually made some different changes to your form and it focuses now for me. There was a syntax error in the HTML of the script you posted that may have caused interference but probably not. Let me know how it works. I put more cross-browser friendly javascript in too.
    Code:
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    // --------< loader fn
    function loader() {
    window.status="I'm in the function Loader";
    document.getElementById('text1').value = "Start";
    document.getElementById('text1').select();
    document.getElementById('text1').focus();
    }// --------------------------------------------------- 
    
    function validText1(element) {
    if (element.value.length == 0) {
    	alert("You need to type something into TextBox One");
    	element.focus();
    	return false;
    }
    else return true;
    }
    
    function validText2(element) {
    if (element.value.length == 0) {
    	alert("You need to type something into TextBox Two");
    	element.focus();
    	return false;
    }
    else return true;
    }
    
    function submitTest(form) {
    if (form.elements["text1"].value == "Start") {
    	 alert("Type something besides the word test in TextBox1");
    	 form.elements["text1"].focus();
    	 form.elements["text1"].select();
    	 return false;
    }
    	else return true; //always 'false' because there's no followup form
    }
     
     function fieldCheck(form) {
    	if (submitTest(form)) {
    		 return(
    			validText1(form.elements["text1"]) &&
    			validText2(form.elements["text2"])
    		 )
    	}
    	else return false;
     }
    
     // -->
     </script>
     </head>
    
     <body onload="loader()" bgcolor="#FFFFFF" text="#000000">
    
     <p>&nbsp;</p>
    
     <form name="foo" return onsubmit="if (!fieldCheck(this)) return false;"><div align="center">
     Enter up to eight characters in TextBox One
     <input type="text" id="text1" name="text1" maxlength="8" size="10">
     <br />
     Enter up to eight characters in TextBox Two
     <input type="text" id="text2" name="text2" maxlength="8" size="10">
     <p>&nbsp;</p>
     <input type="button" name="button1" value="Focus on TextBox One" onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <input type="submit" id="submit" name="submit" value="Submit">
     </div> 
     </form>
    </body>
  6. #4
  7. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2004
    Posts
    28
    Rep Power
    0

    Red face Thanx, Shamrog12 !!!


    I'm most grateful for your effort & reply.

    I cut 'n pasted your code into Dreamweaver (Ultradev, actually), and
    sent it over to the server. I opened the prog in IE 6.0.

    With both fields <blank>/null, I clicked on the Submit; and found myself in an unescapable loop of alert msgboxes.

    Had to give it the ol' 3-fingered salute.

    I appreciate & understand your addition of testing the fields in the 'form' validation; but for now, just to keep things fairly simple, I want to 'focus' (no pun intended... well, kinda), on the issue of being able to set focus() resulting from 'onBlur' calling a function.

    With my original code, focus() worked jes' peachy with the onload() call, and with the onsubmit="submitTest()".

    I just can't get the desired focus using 'onblur'. ('onchange' is out of the question.)

    Does anyone know how to make 'onblur' calling a textbox validation function, set focus() back to the textbox that called the onblur?

    Thanx again, Shamrog12... if you think of something else, please lemme know. I appreciate your effort.
  8. #5
  9. Newton's Apple Wizard
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Location
    Los Angeles
    Posts
    1,662
    Rep Power
    63
    What I sent you didn't work for you? I tested it with no problems in NS7.2, IE6, and Safari
  10. #6
  11. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2004
    Posts
    28
    Rep Power
    0
    Originally Posted by shamrog12
    What I sent you didn't work for you? I tested it with no problems in NS7.2, IE6, and Safari
    Nope, I'm sorry to say. (dadgummit!) Wish it would have.

    Yesterday, Monday, I was testing it on IE6, and have drawn a conclusion. That is that the 'onBlur' event isn't the last gasp/event for an object (in this case, a textbox). One thing that the onBlur handler can't handle is to set the focus onto any other object with a degree of permanence. Here's my text to verify that (the test for a zero-length value in textBox Two):

    function validText2(element) {
    if (element.value.length == 0) {
    alert("You need to type something into TextBox Two");

    document.foo.text2.value = "alerted";
    alert("This is the 2nd alert for TextBox Two");
    document.foo.submit.focus();
    return false;
    }

    Procedure:

    I position the cursor in text2 & delete all characters.
    I touch <tab> to move focus away from text2. The onBlur handler fires function validText2().
    The "You need to type..." alert pops up. I grab the alert's titlebar and pull it down & away from text2 to see that text2 is still blank.
    I click the alert's OK button. "alerted" appears in text2; and alert, "This is the 2nd..." pops up.

    I view text2 again and see the word 'alerted'.

    I click that alert's OK button; and here's where I conclude that onBlur is not the final activity for an object.

    In IE6, I can see that the Submit button had indeed received focus, by virtue of that little ring of dashed lines that go round the inside of the Submit button... but the true & current focus is on the button to the right, "Focuson TextBox One".

    This tells me that all the actions in the validText2 function did, indeed, occur; but upon completion of that onBlur handler, the object's last gasp is to move focus to the next higher object in the tab index (even tho' I don't explicitly declare tab indices).

    Regarding the code you sent/posted; and which retains focus on the current object, I'm willing to try it again. I wonder what could be the difference between your NN & IE and mine.

    Did you send just the kernel of your code, as I did, or was it complete? Do you utilize a top line stating HTML/XHTML 'transitional'/'strict', etc. I didn't... and if you did, that might make all the difference.
  12. #7
  13. Newton's Apple Wizard
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Location
    Los Angeles
    Posts
    1,662
    Rep Power
    63
    here is all my code again. The XHTML shouldn't effect the javascript.
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    // --------< loader fn
    function loader() {
    window.status="I'm in the function Loader";
    document.getElementById('text1').value = "Start";
    document.getElementById('text1').select();
    document.getElementById('text1').focus();
    }// --------------------------------------------------- 
    
    function validText1(element) {
    if (element.value.length == 0) {
    	alert("You need to type something into TextBox One");
    	element.focus();
    	return false;
    }
    else return true;
    }
    
    function validText2(element) {
    if (element.value.length == 0) {
    	alert("You need to type something into TextBox Two");
    	element.focus();
    	return false;
    }
    else return true;
    }
    
    function submitTest(form) {
    if (form.elements["text1"].value == "Start") {
    	 alert("Type something besides the word test in TextBox1");
    	 form.elements["text1"].focus();
    	 form.elements["text1"].select();
    	 return false;
    }
    	else return true; //always 'false' because there's no followup form
    }
     
     function fieldCheck(form) {
    	if (submitTest(form)) {
    		 return(
    			validText1(form.elements["text1"]) &&
    			validText2(form.elements["text2"])
    		 )
    	}
    	else return false;
     }
    
     // -->
     </script>
     </head>
    
     <body onload="loader()" bgcolor="#FFFFFF" text="#000000">
    
     <p>&nbsp;</p>
    
     <form name="foo" return onsubmit="if (!fieldCheck(this)) return false;"><div align="center">
     Enter up to eight characters in TextBox One
     <input type="text" id="text1" name="text1" maxlength="8" size="10">
     <br />
     Enter up to eight characters in TextBox Two
     <input type="text" id="text2" name="text2" maxlength="8" size="10">
     <p>&nbsp;</p>
     <input type="button" name="button1" value="Focus on TextBox One" onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <input type="submit" id="submit" name="submit" value="Submit">
     </div> 
     </form>
    </body>
    </html>
  14. #8
  15. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2004
    Posts
    28
    Rep Power
    0

    Red face I thought something was a bit unexpected...


    shamrog12, I found out why things are working so swimmingly for you. Your code (which I loaded into Dreamweaver, FTP'd to the server; and executed) is missing the most crucial parts, the onBlur lines!!!

    Following the <input's for text1 & text2 are lines like this:

    onBlur="return validText1(this)">

    Try your code with these onBlur lines, if you wouldn't mind.

    Here's my opening line when I began this thread:

    I just can't get javascript to return focus to an invalid textbox with onBlur, although via onSubmit everything is just fine, as well as with onClick="javascript:...".

    The only thing(s) I couldn't get to work was the onBlur.
    onSubmit worked fine.
    onClick worked fine.
    onLoad worked fine.

    I just can't get onBlur to return to (focus) on the object with the bogus value in a textbox.

    Give it a try if you can, please...
  16. #9
  17. Newton's Apple Wizard
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Nov 2003
    Location
    Los Angeles
    Posts
    1,662
    Rep Power
    63
    no kidding, i took onblur out because onblur isn't what i was going after. I was showing you a way to effectively validate the script without having to use onblur which put me in a continuous alert pattern. I left them out on purpose. It still blows my mind that the code doens't work perfectly for you. I feel like i'm in bizarro world. Consider your typical user with the onblur. Not everyone wants the form to dictate which field they fill out first. The more leniant the better. Remember, not all users are computer literate etc. so complicated, controlling forms can scare people.
  18. #10
  19. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2004
    Posts
    28
    Rep Power
    0

    All is not lost....


    Well, it's been a rather edu-micational experience.

    Your code works flawlessly for validation at the form level.

    I was seeking a method at the field level.

    I do appreciate your effort and replies. Thanx for hanging in there.

    I wonder why that feature of onBlur whilst attempting to reset the focus, resulting in undesireable situations, is so poorly documented.

    I checked several Javascript books (J. Bible by Goodman, etc.), the W3C, web searches, and so on.

    And I appreciate your opinion regarding the user's ability being able to point to (or tab to) any field for random selection of textboxex, etc.

    I prefer to have the user guided to the field of my choosing (usually the first field), by setting the focus in an onload call.

    I also prefer (but not always) to inform the user that her/his entry was unacceptable when she/he exits a field, rather than let her/him go on filling out a form, only to get a list of fields that require attention (or worse yet, one at a time alerts, each time the Submit button is clicked).

    Thanx again,
    C
    ==
  20. #11
  21. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2005
    Posts
    1
    Rep Power
    0

    timing issue


    You;re running into the infamous IE onBlur timing bug.

    see http://www.xs4all.nl/~sbpoley/webmatters/formval.html for an example of how to get around it.

    Originally Posted by abacus
    Well, it's been a rather edu-micational experience.

    Your code works flawlessly for validation at the form level.

    I was seeking a method at the field level.

    I do appreciate your effort and replies. Thanx for hanging in there.

    I wonder why that feature of onBlur whilst attempting to reset the focus, resulting in undesireable situations, is so poorly documented.

    I checked several Javascript books (J. Bible by Goodman, etc.), the W3C, web searches, and so on.

    And I appreciate your opinion regarding the user's ability being able to point to (or tab to) any field for random selection of textboxex, etc.

    I prefer to have the user guided to the field of my choosing (usually the first field), by setting the focus in an onload call.

    I also prefer (but not always) to inform the user that her/his entry was unacceptable when she/he exits a field, rather than let her/him go on filling out a form, only to get a list of fields that require attention (or worse yet, one at a time alerts, each time the Submit button is clicked).

    Thanx again,
    C
    ==
  22. #12
  23. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    433
    Lads, this thread is 10 months old.

    If abacus still needs help with this, then I'd be very surprised!

    Anyway, fricklas, that page you linked is not very good, the JS
    used is excessively bloated and mostly unnecessary.

    Nathan: that page you linked is awful: the code is ugly; and the
    markup is horrible. If you are going to tout your code as suitable
    to solve other's problems, you could at least make it useable.
    Support requests via PM will be ignored!
    Route of Queue | The General FAQ Thread | HOW TO POST A QUESTION

    Perfectly Impossible - is the eagerly awaited debut release from Jayne Sarah - please buy it - it's really good!

  24. #13
  25. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2005
    Posts
    6
    Rep Power
    0
    lol markup?
  26. #14
  27. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,135
    Rep Power
    2926
    fricklas - please do not bring back old threads. it's really useless.

    nathan - I've moved your post, put it in the Site Reviews forum.

Similar Threads

  1. Replies: 3
    Last Post: July 24th, 2004, 04:50 AM
  2. form validation against database field
    By WonderWoman in forum ASP Development
    Replies: 4
    Last Post: April 28th, 2004, 09:45 AM
  3. Simple combo box/text box issue, difficult description (part 1)
    By etalent in forum Microsoft Access Help
    Replies: 1
    Last Post: March 29th, 2004, 05:16 PM
  4. Repeating form field validation
    By Steve Schofield in forum ASP Development
    Replies: 1
    Last Post: April 12th, 2000, 05:39 AM
  5. form field validation (conditional)
    By Steve Schofield in forum ASP Development
    Replies: 1
    Last Post: March 15th, 2000, 10:50 PM

IMN logo majestic logo threadwatch logo seochat tools logo