jquery - 防止 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();
}