validation not working still submitting the form.

Question

Now here is another problem.. my code:

<script type="text/javascript">
function validate_form ()
{


    if ( document.myform.tele_caller.value == "" )
    {
       alert ( "Please insert the Name" );
       return false;
 }
 else
 {
 return true;
 }
}
</script>

and the form-

 <form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data" name="myform" 
onsubmit="return validate_form ( );">
<table class="panel1">
 <tr>
  <td align="center">Caller Name:&nbsp;
    <input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
 </tr>
 <tr>
  <td align="right">
  <input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
  <a href="telecallerinfo.php"><img src="images/cancel.gif" height="25" width="70"/></a>
  </td>
 </tr>


</table>
</form>

now the validation is called and the alert box is also being displayed but the form is still being submitted. where is the mistake?

Answer 1

You're manually calling the submit() here:

onclick="this.form.submit();"

Just remove that onclick handler, there's no need for that handler, it'll happen automatically since it's inside the <form>.

Here's the comparison: your current code, with onclick (still submitting) vs. your code with onclick removed (only submitting when valid).

Answer 2

Remove onclick="this.form.submit(); from the input-submit tag.

Answer 3

Try to use input with type submit and no onclick event

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

and you can put image in css

input#submit {
  background-image: images/submit.gif;
  width: 60px;
}