Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: why does error message blinks onsubmit

  1. #1
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default why does error message blinks onsubmit

    hi all

    why does my validation error messages blink for a second on click of submit button

    they dont stay static.

    whats the solution

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    function doValidate() {
    if(document.registerform.textbox1.value= " ")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
    }
    if(document.registerform.textbox2.value= " ")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
    }
    }
    </script>
    <body>
    <form onsubmit="return doValidate();" method="post" name="registerform">
    <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div>
    <input name="textbox1" id="textbox2" /><div id="hiddenDiv2"></div>
    <input type="submit" name="" value="Submit"/>
    </form>
    </body>
    </html>
    vineet

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    To prevent it from submitting, you need to return false for an invalid form. And your tests will always be true as they're using single = signs which set a condition, rather than test a condition. It's true because they're setting a true or 'truthy' condition (value = space char).

    This should work:

    Code:
    <script type="text/javascript">
    function doValidate() {
    var isvalid = true;
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
             isvalid = false;
    }
    return isvalid;
    }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi john

    i tried it

    but the errors doesnt disappear when second time i enter correct data and click submit button.

    Am i doing something wrong?

    vineet

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    function doValidate() {
    var isvalid = true;
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
             isvalid = false;
    }
    return isvalid;
    }
    </script>
    <body>
    <form onsubmit="return doValidate();" method="post" name="registerform">
    <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div>
    <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div>
    <input type="submit" name="" value="Submit"/>
    </form>
    </body>
    </html>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    function doValidate() {
    var isvalid = true;
    document.getElementById("hiddenDiv").innerHTML = document.getElementById("hiddenDiv2").innerHTML = '';
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
             isvalid = false;
    }
    return isvalid;
    }
    </script>
    <body>
    <form onsubmit="return doValidate();" method="post" name="registerform">
    <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div>
    <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div>
    <input type="submit" name="" value="Submit"/>
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    vineet (10-02-2012)

  6. #5
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    thanks a lot john

    it works perfect;

    vineet

  7. #6
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi john

    i tried to add "focus" on the input fields with error

    but the "focus" goes to 2nd field even if the 1st field is empty

    vineet

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    function doValidate() {
    document.getElementById("hiddenDiv").innerHTML = '';
    document.getElementById("hiddenDiv2").innerHTML = '';
    var isvalid = true;
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
    		 document.registerform.textbox1.focus();
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
    		 document.registerform.textbox2.focus();
             isvalid = false;
    }
    return isvalid;
    }
    </script>
    <body>
    <form onsubmit="return doValidate();" method="post" name="registerform">
    <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div>
    <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div>
    <input type="submit" name="" value="Submit"/>
    </form>
    </body>
    </html>

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think you mean an error like it breaks the script, rather that if both fields are empty you want the focus to go to the first field but it's going to the second. If that's the problem:

    Code:
    <script type="text/javascript">
    function doValidate() {
    document.getElementById("hiddenDiv").innerHTML = '';
    document.getElementById("hiddenDiv2").innerHTML = '';
    var isvalid = true;
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
    		 document.registerform.textbox1.focus();
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
    	if(isvalid){ document.registerform.textbox2.focus();}
             isvalid = false;
    }
    return isvalid;
    }
    </script>
    But that still might not work out because after focusing on the first field you write to the hidden div of the second, that might disrupt focus, it might not, but to be sure you could do:

    Code:
    <script type="text/javascript">
    function doValidate() {
    document.getElementById("hiddenDiv").innerHTML = '';
    document.getElementById("hiddenDiv2").innerHTML = '';
    var isvalid = true, focusfield;
    if(document.registerform.textbox1.value == "")
    {
             document.getElementById("hiddenDiv").innerHTML = "enter your email id its required";
    	 focusfield = document.registerform.textbox1;
             isvalid = false;
    }
    if(document.registerform.textbox2.value == "")
    {
             document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required";
    	 if(!focusfield){focusfield = document.registerform.textbox2;}
             isvalid = false;
    }
    if(focusfield){focusfield.focus();}
    return isvalid;
    }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    vineet (10-03-2012)

  10. #8
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    thanks john

    works perfect

    vineet

  11. #9
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi john

    In continuation of the above validation code...

    I would like to add the another function to the form "onsubmit"

    at present this function performs on "onkeyup"

    Code:
    <input type="text" name="textbox1" onkeyup="toggle_username('textbox1')"/>
    i want to perform this function on "onkeyup" and also on "onsubmit"

    Code:
    function toggle_username(userid) { 
        if (window.XMLHttpRequest) { 
            http = new XMLHttpRequest(); 
        } else if (window.ActiveXObject) { 
            http = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        handle = document.getElementById(userid); 
        var url = 'check_user.php?'; 
        if(handle.value.length > 0) { 
            var fullurl = url + 'do=check_username_exists&textbox1=' + 
    
    encodeURIComponent(handle.value); 
            http.open("GET", fullurl, true); 
            http.send(null); 
            http.onreadystatechange = statechange_username; 
        }else{ 
            document.getElementById('user_error').innerHTML = ''; 
        } 
    } 
    
    function statechange_username() { 
        if (http.readyState == 4) { 
            var xmlObj = http.responseXML; 
            var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data; 
            document.getElementById('user_error').innerHTML = html; 
        } 
    }

    so that 2 functions perform "onsubmit".

    Code:
    <form onsubmit="return doValidate();" method="post" name="registerform">
    vineet

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Does that even work? I ask because you have getElementById, but that id is the element's name, not its id. I think some browsers will do that, maybe.

    A problem with doing that onsubmit would be that, since it's asynchronous (means other things on the page may continue on without waiting for it to complete) it might not return any data in time before the form submits, which reloads the page or takes you to another page, either way any asynchronous process not yet completed would be aborted.

    Both those things said, syntactically you may run two things onsubmit like so:

    Code:
    <form onsubmit="toggle_username('textbox1'); return doValidate();" method="post" name="registerform">
    But if toggle_username('textbox1') throws a javascript error, and by that I mean has a problem, not that it reports an error message for the name, then doValidate() will never get a chance to fire and the form will submit anyway, regardless of whether or not it passes the validation.

    I think the better approach, rather than using onkeyup and/or trying to combine it with onsubmit might be to fire it onchange of the input.

    This could still get you into problems if it throws a javascript error, so you might want to do something like so:

    Code:
    <input type="text" name="textbox1" id="textbox1" onchange="try{toggle_username('textbox1');}catch(e){}"/>
    and forget about combining it with onsubmit.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Can anyone help with an error message?
    By Gemini23 in forum JavaScript
    Replies: 0
    Last Post: 01-13-2010, 07:41 PM
  2. Error Message in 3d spinning message
    By drgsb in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-24-2009, 06:36 AM
  3. XML error message
    By jendelaniaga in forum Dynamic Drive scripts help
    Replies: 25
    Last Post: 07-26-2008, 05:01 AM
  4. XML error message
    By kalxen in forum HTML
    Replies: 2
    Last Post: 04-10-2008, 02:04 PM
  5. Error message...
    By confusio in forum PHP
    Replies: 4
    Last Post: 07-08-2006, 03:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •