简体   繁体   English

错误的表单验证后,似乎正在重新登录登录页面

[英]seems that login-page is reloading after false form-validation

I was changing my loginpage and I've put the jquery with the form-validation in a separate file instead of on the page itself. 我正在更改登录页面,并将带有表单验证的jQuery放在单独的文件中,而不是放在页面本身上。

$(document).ready(function(){
    $("#confirm").on("click", function(e){
       e.PreventDefault();

        var check = true;
        var empty_fields = ['name','password'];

        for (i=0; i<empty_fields.length; i++) {
            var $field = $('#'+empty_fields[i]);

            if ($.trim($field.val()) == '') {
                $field.addClass('error');
            check = false;
            } 
            else {
                $field.removeClass('error');
            }            
        }

        if (check == true)
        {
            $.ajax({
                type: 'POST',              
                url: 'PHPCalls.php?CallID=Login',
                data: $("#loginform").serialize(),
                success: function(data) {                    
                    var result = $.trim(data);
                    if(result == 'true') {
                        alert('succeeded');
                    }
                }
            });
        }
    });
});

Before the part where I do my check on the input being empty was on the login-page itself and worked fine. 在我检查输入是否为空的那一部分之前是登录页面本身,并且工作正常。 I called it with an onclick="return check_form();" 我用onclick =“ return check_form();”来调用它 and then returned the value 'check' being true or false. 然后返回值“ check”为true或false。

Since I've put this script in a separate file it seems like the page is reloading itself. 由于我已将此脚本放在单独的文件中,因此页面似乎正在重新加载自身。 When I click on the confirm-button the input-boxes get the error-layout but then the page flashes and all is set back to normal...I have no clue what is happening... 当我单击确认按钮时,输入框得到了错误布局,但是页面闪烁并且所有设置都恢复为正常...我不知道发生了什么...

Anyone can set me on the right track? 有人可以让我走上正确的路吗?

This is a stripped part of the login-page 这是登录页面的一部分

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/ajaxLogin.js"></script>
    <script type="text/javascript" src="js/sha512.js"></script>
    <script type="text/javascript" src="js/forms.js"></script>
</head>
<body>
<form name="loginform" class="loginform" action="#" method="post">
    <input type="text" name="name" id="name" class="input username"  placeholder="Name" onfocus="this.value=''" />
    <input type="password" name="password" id="password" class="input password"  placeholder="Wachtwoord" onfocus="this.value=''" />
    <input type="submit" id="confirm" value="Login" class="button" />
</form>
</body>

SOLUTION: add PreventDefault() and remove formhash() 解决方案:添加PreventDefault()并删除formhash()

You need to return false if check! 如果检查,则需要返回false! = true =真

if (check == true)
    {
        $.ajax({
            type: 'POST',              
            url: 'PHPCalls.php?CallID=Login',
            data: $("#loginform").serialize(),
            success: function(data) {                    
                var result = $.trim(data);
                if(result == 'true') {
                    alert('succeeded');
                }
            }
        });
    }
else
{
    return false;
}

Try this 尝试这个

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM