none
IE7 onSubmit return false in function fails

    Pregunta

  • Hello all,

    I am having this particularly annoying issue with IE7 on Vista and XP.  I'm attempting to do some simple javascript validation on a form before it is sent off to the server to process.  If the validation fails on any item, I want the script to simply block the post from even starting.

    The trouble I've found, I can't seem to work around.  I believed there must have been some error in my long and cumbersome set of validation functions, so I removed all that code and put together a very simple test, included below.  I'm honestly hoping someone has a workaround for this that I just haven't come across yet in the two days I've been searching for an answer.

    Thanks

    --

    This code works fine:

    <form method="post" action="action.html" onsubmit="return false;">
    <input type="submit" />
    </form>

    This code fails, and allows the form to be submitted:

    <script>
    function testFunction() {
    return false;
    }
    </script>

    <form method="post" action="action.html" onsubmit="return testFunction();">
    <input type="submit" />
    </form>
    jueves, 15 de mayo de 2008 1:11

Respuestas

  •  

    My Workaround is...

    leave the

    onsubmit="return checkform()"

    in the form field

     

    and on your submit button, change the

    type="submit"

    to

    type="button" onclick="checkform()"

     

    AND... in the checkform function add the following

    document.form-name.submit();

    in the right place / when its all ready to go.

     

    With ie7 you can even leave out the form bit, and just have your javascript referenced on the button,

    but it might break with older, and newer! versions - i only tested with ie7

     

    Annoying isnt it.

    Jon

    viernes, 16 de mayo de 2008 10:22

Todas las respuestas

  • Well, I did a lot of working on it, and I discovered that if you define the function inside the attribute itself, it behaves properly in IE7.  It may not be pretty having a 100+ line validation function crammed in there, but as long as it works I'm happy.  Example follows.


    I'd still like a proper workaround, though.


    <form method="post" action="action.html" onsubmit="function testFunction() { return false; }; return testFunction();">
    <input type="submit" />
    </form>
    jueves, 15 de mayo de 2008 2:12
  • Have you tried removing the "return"?

    Code Snippet

    <form method="post" action="action.html" onsubmit="testFunction();">
    <input type="submit" />
    </form>


    jueves, 15 de mayo de 2008 3:58
  • I have, removing the return causes it to fail in all browsers, not just IE, and doesn't make it work in IE either.  Using return is how it is suggested to do it in the MSDN, too.  I did also try the exact syntax shown there, with the same result.  I've also tried setting the event.returnValue to false, with the same bad result.


    jueves, 15 de mayo de 2008 13:20
  •  

    My Workaround is...

    leave the

    onsubmit="return checkform()"

    in the form field

     

    and on your submit button, change the

    type="submit"

    to

    type="button" onclick="checkform()"

     

    AND... in the checkform function add the following

    document.form-name.submit();

    in the right place / when its all ready to go.

     

    With ie7 you can even leave out the form bit, and just have your javascript referenced on the button,

    but it might break with older, and newer! versions - i only tested with ie7

     

    Annoying isnt it.

    Jon

    viernes, 16 de mayo de 2008 10:22
  • Hello Gruenlich,
    I just found this topic by Google - I had the same problem.
    I found this workaround (if or tenr operator, both works):

    <form method="post" action="action.html" onsubmit="return testFunction() ? true : false;">
    <input type="submit" />
    </form>

    viernes, 16 de mayo de 2008 11:52
  •  Gruenlich wrote:
    Hello all,

    This code fails, and allows the form to be submitted:

    <script>
    function testFunction() {
    return false;
    }
    </script>

    <form method="post" action="action.html" onsubmit="return testFunction();">
    <input type="submit" />
    </form>

     

    Interesting, I've been unable to reproduce this problem on my IE7 XP SP2

    viernes, 16 de mayo de 2008 14:16
  • Hmm, well, I tried the suggestions thus far, jpseout: yours didn't change the result at all.

    BigJonMX, your suggestion did work, but with one change, I had to put return false; in the onsubmit attribute for it to keep the form from submitting when a user just hits enter in one of the text inputs.  Also, it did break the usability of the form for users who had javascript disabled for one reason or another, since it's not really a submit button.  I realize that I could just say "use javascript or leave," but that doesn't fit with the general attitude of the site I'm building.  Great suggestion though.

    Anthony:  I tested it on IE7 on Vista Home Premium x32, and on XP x64 SP2.  It could be something in a patch, or in an addon, or maybe in some system policy that's been set, I'm just not sure.  If there's a chance that it's broken for any percentage of my user base though, it's something that I must work around.

    What I did do to make it work was to define the whole function in the onsubmit attribute, it's very very ugly, but most people won't look at that part of the markup anyways (I hope!)

    Thanks for the replies!
    viernes, 16 de mayo de 2008 14:36
  • Since the issue only affects IE7 in some cases you could try event.returnValue = false;

     

    function validate()

    {

    if (event) event.returnValue = false;

    return false;

    }

     

    ... onsubmit="return validate();"

     

    Since I can't reproduce I can't confirm that it fixes it.

     

    viernes, 16 de mayo de 2008 14:41
  • I did attempt to use event.returnValue, with no success.
    viernes, 16 de mayo de 2008 20:21
  • I also ran into this problem for both IE7 and FF. 

    I solved the problem by removing the parameter from the function call in the onSubmit of the form

    <script type="text/javascript">
    <!--
    function checkmyform ()
    {
        var error = "";
        var returnval;

        if (document.LeadInfoForm.FirstName.value == "") {
          error = error + " FirstName";
        }
        if (document.LeadInfoForm.LastName.value == "") {
          error = error + " LastName";
        }
        if (error.length > 0)
        {
            alert("Please enter the following fields: " + error);
            document.LeadInfoForm.focus();
            returnval = false;
        }
        else
        {
            returnval = true;
        }
        return returnval;
    }
    //-->
    </script>

    <form action="submitLeadInfoForm.php" name="LeadInfoForm" onsubmit="return checkmyform();" method="post">
            <input type="text" name="FirstName" value="" size="20" class="required">
            <input type="text" name="LastName" value="" size="40" class="required">
    </form>



    domingo, 05 de octubre de 2008 0:35