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

防止Django表单隐藏无效输入

1 个答案: