How can I make a tag in IE7 submit the form, while doing all the form validation that is setup on the form?

if I just do a document.forms[0].submit(); it submits, but ignores form validation.

Edit: Everybody likes telling me to use the input tag... That will sumbit the form but wont work in my situation which is why i asked about the button tag...

<form action="my/script" onsubmit="return ValidateFunc();">
<button> <img src="image/do_this_with_input_tag.png"> Some Text </button>
</form>

How can I make a tag in IE7 submit the form, while doing all the form validation that is setup on the form?

if I just do a document.forms[0].submit(); it submits, but ignores form validation.

Edit: Everybody likes telling me to use the input tag... That will sumbit the form but wont work in my situation which is why i asked about the button tag...

<form action="my/script" onsubmit="return ValidateFunc();">
<button> <img src="image/do_this_with_input_tag.png"> Some Text </button>
</form>

• javascript
• internet-explorer-7

• Are you using a <button type="submit">? – Nick Craver Commented Oct 26, 2010 at 2:10
• @Nick Craver: If my memory serves me correctly that's the default type in IE, but not the other browsers. – some Commented Oct 26, 2010 at 2:17
• 2 @Justin808: I think we need to see more of your code to help you. – some Commented Oct 26, 2010 at 2:17
• You should be using an <input> tag. Anything you can accomplish with <button> tag can be achieved with an <input> and some CSS. – user229044 ♦ Commented Oct 26, 2010 at 3:38
• 1 @meager no it can't. You can't paragraphs of text, a heading and some text, a table, an image (with alt text), a numbered list etc into an <input> whereas all this is possible with <button> – thomasrutter Commented Oct 26, 2010 at 4:00

6 Answers 6

First have a button with type submit as

<input type="submit" value="submit" />

In your form tag, include the onsubmit() event as

<form
     action="/path/to/server/side/script"
     name="testform" 
     onsubmit="return validate()"
     >

The validate() function should return true if the form validation goes through or a false if the validation fails. e.g.

function validate(){
   if(...){//valid
      return true;    
   }else{//not valid
      return false;
   }    
}

EDIT: Always specify the button type. If not specified, in IE it defaults to "button" while in Chrome and Firefox it defaults to "submit".

<form action="my/script" onsubmit="return ValidateFunc();">
<button type="submit"> <img src="image/do_this_with_input_tag.png"> Some Text </button>
</form>

And in future, include more details in your question if you want proper answers.

I solved this simply by adding type="submit" to the button.

<button>Submit</button> was not submitting in IE7.

<button type="submit">Submit</button> does submit in IE7.

I guess that the Validation only recognize a "submit" event from a "submit" button.

You should use a "submit" input instead of a "button" input. Then the validation mechanism will be able to intercept the submit event. you can call form.submit within the validation.submit function.

Here's the code:

<form id="theForm">
   ...
   <input type="submit" value="submitMe"/>
</form>

in Javascript:

$('#theForm').validate({
    ...
    submitHandler: function() {
        // do some trick here
        ...
        // submit the form
        $('#theForm').submit();
    }
});

I used jquery to submit the button. If i use straight javascript if bypasses the validation setup. Jquery 's form submit runs the validation before submitting.

After additional research, the tag, even with a type="submit" cannot submit a form in older version of IE.

I'm using (dummy/not visible) input field inside form positioned absolute with this css:

<input class="dummy" type="submit" />

.dummy {
    position:absolute;
    bottom:0px;
    right:0px;
    padding:0px;
    margin:0px;
    border:0px;
    font-size:0px;
    line-height:0px;
}

Just avoid using display:none or visibility:hidden or width:0px etc. Use only this css i have provided.

I had the same problem with IE11 with a submit button inside another form:

<form id="form1">
  ...
</form>
<form id="form2">
  ...
    <button type="submit" form="form1">OLA KE ASE</button>
  ...
</form>

You can solve it usign javascript, i did it with jQuery on a generic way.

$(document).ready(function() {
    $('button[type=submit]').on('click', function() {
        if ($(this).attr('form') != '') {
            document.getElementById($(this).attr('form')).submit();
        }
    });
});