I have a Django form that needs to do some client-side validation before submitting the form. This is the code in the template:
<form action="/{{ blog_entry.id }}/addComment/" method="post">
{{ commentForm.name.label_tag }}
{{ commentForm.name }}
<span id="spanNameReq" style="color:Red; display:none;">Required</span>
<br />
{{ commentForm.email.label_tag }}
{{ commentForm.email }}
<span id="spanEmailReq" style="color:Red; display:none;">Required</span>
<span id="spanEmailInvalid" style="color:Red; display:none;">Invalid e-mail address</span>
<br />
{{ commentForm.website.label_tag }}
{{ commentForm.website }}
<span id="spanWebsiteInvalid" style="color:Red; display:none;">Invalid URL</span>
<br />
{{ commentForm.comment.label_tag }}
<span id="spanCommentReq" style="color:Red; display:none;">Required</span>
<br />
{{ commentForm.comment }}
<br />
<input type="submit" value="Add comment" onclick="javascript:var ret = validateComment(); return ret;" />
</form>
But the problem is that validateComment does not get called at all, and the form gets submitted straight away. Strangely enough if I replace the onclick event with
javascript:alert('test');
or
javascript:return false;
that JS code gets executed fine (and in the second case it won't submit the form).
Why does it not execute the function I specified? Just to confirm that I have included the script file in the HTML head (including the JS code embedded in the template does not make a difference), and if I don't use a Django form, but a normal HTML form it works fine.