Question

我一直在创建一个表单，供用户登录我的站点，使用jquery进行登录验证，并且还有一个PHP后备，以防万一Javascript被禁用。用户的登录表单本身就是一个灯箱。我试图设计它的方式是，如果出现错误，错误消息将直接出现在灯箱中而不关闭它或重定向用户。我基本上都在检查事情。如果用户名为＆＃39;和密码＆＃39;字段已填写，如果用户名＆＃39;和密码＆＃39;字段可以验证。当我检查字段是否已填写时，Javascript工作正常。＆＃39;返回false＆＃39;工作，错误信息出现在灯箱内，一切都是“笨蛋”＃39;但是当涉及到验证时，我使用ajax来检查数据库，如果有问题则不会返回false。

实际上发生的是错误信息＆＃39;＆＃39;出现在灯箱的顶部一瞬间，然后它提交给PHP，PHP正在重定向它。

所以这是代码的细分。

$('body').on('click','[name=submit11]',function(){
     $('.error').remove();
     var req = ['username','password'];
     var div = '#login_form';
     validate(div,req);
     if($('.error').length == 0){
        var login = true;
        var username = $(this).siblings('[name=username]').val();
        var password = $(this).siblings('[name=password]').val();
        $.post('../ajax/multipurpose.php',    {login:login,username:username,password:password},function(data){
            if($.trim(data) != ''){
                $('#login_form').prepend("<div class='error'>"+data+"</div>");
            }                                                                             
        });
    }
    if($('.error').length > 0){
        event.stopPropagation();
        return false;
    }
});

validate函数是我在jquery中使用的自定义函数，它的工作正常。在执行ajax之后，问题在第二个if语句内部开始。在此if语句中，如果ajax发现错误，则会出错。以下是multipurpose.php页面中的代码。

//Used to validate the username and password via ajax
if(isset($_POST["login"])):
    $username = trim($_POST["username"]);
    $password = trim($_POST["password"]);
    if(!$found_user = User::authenticate($username,$password)):
        echo "Username/Password combination is invalid.";
    endif;
endif;

我注意到的另一个问题是，如果出现错误并输入警告（$（＆＃39; .error＆＃39;）。长度）0的值将显示在警告框中，然后点击后在＆＃34;好的＆＃34;在警告框中，该值将显示在灯箱中，然后提交给PHP。这仅适用于ajax部分，不适用于validate（）自定义函数。以下是validate（）函数的代码，以防任何人需要查看它。

function validate(div,fields){
    var boxes = ['pounds_or_kilos','activity'];
    $(div+' .error').remove();
    $(fields).each(function(key,value){
        if($.inArray(value,boxes) == -1){
            text = $('[name='+value+']').val();
            if($.trim(text) == ''){
                removeLoader();
                addError(div,value);
            }
        }else if(!$('[name='+value+']:checked').length){
            addError(div,value);
        }
    });
}

我已经在第二个if语句中尝试了所有内容以阻止它提交。我尝试过返回false ...我在网站的许多区域使用没有问题，我尝试了event.preventDefault（），我尝试在点击功能中加入e并使用e.preventDefault （），我还尝试过event.stopPropagation（），但仍然没有。有人请帮助我。

Answer 1

context是异步的。因此，如果出现错误，请在第二次检查$.post后附加它，这样您就不会阻止表单提交行为。

您可以做的是在所有情况下都防止此行为，如果没有关于ajax请求的错误，请手动提交if($('.error').length > 0)（使用本机DOM方法），例如：

form

无法获取event.preventDefault（）或返回false工作。从早到晚都在尝试

1 个答案: