Question

我有一个Django表单需要在提交表单之前进行一些客户端验证。这是模板中的代码：

<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>

但问题是validateComment根本没有被调用，表单会立即提交。如果我用

替换onclick事件，那就太奇怪了

javascript:alert('test');

或

javascript:return false;

JS代码执行得很好（在第二种情况下，它不会提交表单）。

为什么不执行我指定的功能？只是为了确认我已经在HTML头中包含了脚本文件（包括嵌入在模板中的JS代码没有区别），如果我不使用Django表单，而是普通的HTML表单，它可以正常工作。

Answer 1

我认为你的功能没有被调用。我的预感是你拼错了一些东西。尝试在您的函数中添加alert（）。

Answer 2

首先，请删除'javascript'伪协议前缀。它在onclick属性中绝对没有位置。它是为了在hrefs中使用而发明的，但被on *方法所取代 - 其中的一点是你应该只使用javascript本身。

其次，你为什么要担心这个变量呢？为什么不只是return validateComment()？

第三，你如何确定该函数“根本没有被调用”？似乎可能正在调用该函数，它只是没有返回您认为它的内容。请发布该功能的代码，也许有人会发现错误。

Answer 3

直接在HTML中编写Javascript事件可能会在以后遇到问题 - 而是尝试为表单提供ID，并在<head>部分中从Javascript中捕获提交事件

例如使用jQuery，表单有id =“my_form”：

<script type="text/javascript">

$(document).ready(function(){

$('#my_form').submit(function(){

    if ([test here]){
        return true; 
    } else {
        return false; //prevents submission
    } 

})

})

</script>

Django表单提交按钮的onclick不会调用JavaScript函数

3 个答案: