如果表单提交错误,如何更改页面显示

时间:2012-11-30 06:40:37

标签: javascript css django

在我的django应用中,我正在显示一个button starts and stops a clock页面。页面有一个form,用户可以输入一些详细信息,如姓名,说明等等并提交。最初div包含此表单在css中被display:none隐藏。只显示按钮,点击时钟开始运行。当用户再次按下相同的按钮时,时钟停止,隐藏的表格可见。

我是通过使用javascript来实现这一点的,它为按钮提供状态值 - 'start'和'stop'。我已经编写了一个函数,如果用户点击它并相应地更改状态。

var buttonStatusChange= function(){
    var buttonstatus = $('#clockbtn').attr("value");
    if (buttonstatus == "start"){
        $('#clockbtn').attr("value","stop");
        ...
        hideElement("userinputdiv");
    }else if (buttonstatus == "stop"){
        $('#clockbtn').attr("value","start");
        ...
        showElement("userinputdiv");
    }
};

var showElement=function(elementId){
    var elem_selector='#'+elementId;
    $(elem_selector).show();  
};
var hideElement=function(elementId){
    var elem_selector='#'+elementId;
    $(elem_selector).hide();
};

在我的django视图中,我正在验证帖子中的userinputform和其他forms。如果验证失败,则会显示原始表单(现在该字段旁边有错误)。

def my_view(request,...):
    if request.method=='POST' and otherform.is_valid():
        ...
        userinputform_is_valid = userinputform.is_valid()
        if not userinputform_is_valid:
            return custom_render(request,context,template_name)
        ...
        #otherwise get values from form,save etc..

def custom_render(request,context,template):
   req_context=RequestContext(request,context)
   return render_to_response(template,req_context)

html for page

....
<div id="userinputdiv">
    ....
    <form ...>
     <p>
  <span id="myfield">Enter WholeNumber:</span>
  {{my_form.myfield}}{{my_form.myfield.errors}}
  </p>
   ...

不幸的是,由于css对于userinputdiv有一个display:none,所以div是隐藏的,因此用户无法看到错误。他现在看到的是一个只有一个按钮的页面,它可以启动/停止时钟。如果我采取页面的来源,<ul class="errorlist ...>

中存在错误

所以,我想知道如果在post期间发生任何验证错误,如何让userinputform对用户可见。如果我为userinputdiv display:block制作了css,页面中的错误将按预期显示 - 但是显示所有输入字段,甚至在任何时钟运行之前......我不希望发生这种情况,因为我使用时钟的开始和结束时间作为隐藏字段在帖子中发送并在我的处理中处理django view

1 个答案:

答案 0 :(得分:0)

在相同的情况下我正在使用Ajax并且如果从服务器获取错误 - 动态地为字段添加它(我在占位符中写入)。 使用Ajax变体,您可以使用jquery的AjaxStart-AjaxStop函数运行和停止Clock。