javascript - Mousedown 仍在提交表单，而它不应该

Question

你好，我有一个登录验证表单，它混合使用 jquery 和 ajax 来进行验证...如果值正确，则表单应提交，如果值不正确，则表单不应提交...但是在我的例子中，即使值不正确(我正在使用 mousedown 函数)，表单也会提交，请参阅下面的代码..

<form method="post" name="loginform" action="models/login.php">
    <input type="email" class="homepage" name="user_email2" id="user_email2" placeholder="Email" maxlength="50" />
    <div class="errormsg" id="errormsg6"></div>
    <input type="password" class="homepage" name="user_password2" id="user_password2" placeholder="Password" maxlength="20" />
    <div class="errormsg" id="errormsg7"></div>
    <input type="submit" name="login" id="login" value="Submit">
    <div class="errormsglast" id="errormsg8"></div>
</form>

jquery 和 ajax

$(document).ready(function()
{
    /* ----------------- Login Validations Global Variables -----------------   */
    var user_email2 = "";
    var user_emailajax2 = "";
    var user_password2 = "";
    var user_passwordajax2 = "";
    var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

    /* ----------------- Define Validate Email */
    var validate_email_login = function()
    {
        var item5 = $("#user_email2").val().toLowerCase();
        if (item5.length < 6 || item5.length > 50)
        {
            $("#errormsg6").html("Email : 6 - 50 Characters");
            user_email2 = "";
        }
        else
        {
            $("#errormsg6").html("");
            user_email2 = item5;
            if (!emailformat.test(item5))
            {
                $("#errormsg6").html("Wrong Email Format");
                user_email2 = "";
            }
            else
            {
                $("#errormsg6").html("");
                user_email2 = item5;
                $.ajax(
                {
                    type: 'POST',
                    url: 'classes/validatelogin.php?f=1',
                    data: "user_email2=" + item5,
                    success: function(msg)
                    {
                        if (msg == "ok")
                        {
                            user_emailajax2 = "";
                            $("#errormsg6").html("Email Does Not Exist");
                        }
                        else if (msg == "exists")
                        {
                            user_emailajax2 = item5;
                            $("#errormsg6").html("");
                        }
                    }
                });
            }
        }
    }

    /* ----------------- Define Validate Password */
    var validate_password_login = function()
    {
        var item5 = $("#user_email2").val().toLowerCase();
        var item6 = $("#user_password2").val();

        if (item6.length < 8 || item6.length > 20)
        {
            $("#errormsg7").html("Password : 8-20 Characters");
            user_password2 = "";
        }
        else
        {
            $("#errormsg7").html("");
            user_password2 = item6;
            if (user_email2 != "" && user_emailajax2 != "")
            {
                $.ajax(
                {
                    method: "POST",
                    url: "classes/validatelogin.php?f=2",
                    data: "user_email2=" + item5 + "&user_password2=" + item6,
                    success: function(msg)
                    {
                        if (msg == "WrongPw")
                        {
                            user_passwordajax2 = "";
                            $("#errormsg7").html("Wrong Password - See Forgot Password");
                        }
                        else if (msg == "CorrectPw")
                        {
                            user_passwordajax2 = item6;
                            $("#errormsg7").html("");
                            /* window.location.href="manage-properties"; */
                        }
                    }
                });
            }
        }
    }




    /* ----------------- Run Functions */
    $("#user_email2").on('focusout', validate_email_login);
    $("#user_password2").on('focusout', validate_password_login);


    /* ----------------- Stop on Submit */
    $( "#login" ).mousedown(function() 
    {
        validate_email_login();
        validate_password_login();


        if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
        {
            $("#errormsg8").html("Please Fill All Fields (Correctly)");
            console.log("submit false");
            return false;
        }
        else
        {
            $("#errormsg8").html("");
            console.log("submit true");
            return true;
        }
    });
});

已尝试解决方案 - 问题是当用户输入错误的事件时没问题，但如果用户随后输入正确的值，提交将在第一次返回 false，然后在第二次返回 true。 .. 它应该首先返回 true

<input type="button" name="login" id="login" value="Submit">

    $( "#login" ).mousedown(function() 
    {
        validate_email_login();
        validate_password_login();


        if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
        {
            $("#errormsg8").html("Please Fill All Fields (Correctly)");
            console.log("submit false");
            return false;
        }
        else
        {
            $("#errormsg8").html("");
            console.log("submit true");
            $('[name=loginform]').submit();
        }
    });
});

Answer 1

没有 type="submit"按钮只有一个普通按钮，例如 <input type="button" name="login" id="login" value="Submit"> .然后，当您完成检查值并很高兴它应该发送时，只需调用:

$('[name=loginform]').submit();

因为当前发生的是当您单击按钮时表单会提交，因为您没有阻止该事件的发生。

如果你想阻止表单提交，我建议你要么不使用那个按钮，而是像我上面提到的那样自己启动提交，或者你可以在表单元素的方式上使用 onsubmit="someFunction()"并且只是如果不应该提交则返回 false，如果应该提交则返回 true。