防止使用无效输入隐藏Django表单

Question

我制作了自己的灯箱式事件，并且在用户提交良好数据的情况下，它们都能完美工作。 如果触发验证错误，则表单将提交，刷新页面，而我的JS总是在重新加载页面时隐藏该表单。 因此，当实际上只是隐藏显示验证错误时，数据对用户而言似乎已被接受。 我怎样才能最好地防止这种情况发生？

我的HTML：

<div class='jobfrm'>
    <span class='closex' >&#10006;</span>
    <form method='POST' action = '' class='addjob'>{% csrf_token %}
        {{form|crispy}}
        <input class = 'btn btn-default' type = 'submit' value = 'Submit'/>
    </form> 
</div>  
<div class='opacitydiv'>

</div>

我的CSS：

.jobfrm {
    background-color: #E7D1FF;
    width: 400px;
    position:absolute;
    z-index:9999;
    padding:15px;
    margin: 0;
    border-radius:5px;
}

.opacitydiv{
    background-color: black;
    opacity: 0.8;
    z-index:9998;
    position:fixed;
    width:3920px;
    height:3080px;
    top:0;
    left: 0;
}

.closex{
    float:right;
    cursor: pointer;
    font-size: 25px;
    position:relative;
}

我的JS：

// addjobs form js
(function(){
    var ajform=$('.jobfrm'),
        opa =$('.opacitydiv'),
        w = $(window).width()/2-ajform.outerWidth()/2,
        h = ($(window).height()-ajform.outerHeight())/2;
    opa.hide();
    ajform.hide();
    $('#addjob').on('click',function(){
        opa.show({
            'left':0,
            'top':0
        });
        ajform.show();
        ajform.animate({
            'left':w,
            'top':h
        });
    });
})();


//closes div and form
(function(){
    var ajform=$('.jobfrm'),
        opa = $('.opacitydiv'),
        close= $('.closex');
    opa.on('click',function(){
        opa.hide();
        ajform.hide();        
    });
    close.on('click',function(){
        opa.hide();
        ajform.hide();   
    });    
})();

PS：如果您看到可以改进但与该问题没有直接关系的内容，请随意评论我的代码的其他不相关方面。

Answer 1

如果出现错误，可以按照设置的形式使用另一个类：

<div class='jobfrm{% if form.errors %} has_errors{% endif %}'>

并检查您的onload JS：

var ajform=$('.jobfrm')
if (!ajform.hasClass('has_errors')) {
    ajform.hide();
}