Mousedown仍然提交表格，但不应该

您好我有一个登录validation表单，它使用jquery和ajax的混合来进行validation…如果值是正确的，表单应该提交，如果值不正确那么表单不应该提交…但是在我的情况下即使值不正确（我正在使用mousedown函数），表单也会提交，请参阅下面的代码..

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  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  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

  $( "#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”按钮只有一个普通按钮，例如 。 然后，当您完成检查值并感到高兴它应该发送然后只需调用：

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

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

如果你想阻止表单提交，我建议你不要像我上面提到的那样使用那个按钮并自己启动提交，或者你可以在表单元素方式上使用onsubmit =“someFunction（）”并返回false它应该不提交并返回true。

Answer 2

我会说你的代码有一些问题和一些不好的做法。 我看到你正在努力学习JS，所以请原谅我没有直接解决你的问题，而是给你一些指示并指出你的一些最佳实践。

1. 逻辑 –

   看起来你正在做一个登录表单。 我会说大多数检查不应该发生在客户端，而应该发生在服务器上。 当用户注册时，也可以明智地检查客户端上的用户名长度，并提示用户他不能使用他想要注册的用户名，但在登录期间，我是否可以登录所有客户端。

2. 安全 –

   您的代码似乎有两个严重的安全问题

   1. 您可以使用’classes / validatelogin.php？f = 1’来测试是否存在电子邮件/用户。 一般情况下，如果用户和密码存在并且匹配，则应始终一起测试用户和密码应该能够登录，否则登录失败。 您不应该通知用户失败的原因（如果用户名不存在或存在但密码错误）。
   2. 您似乎没有在数据库中哈希密码。 我通过限制密码最大长度来假设它。 让用户选择他想要的长密码并使用安全散列算法对其进行散列（我建议使用bcrypt，但要找到合适的密码）。 我知道你只是在学习，但这非常重要我认为哈希是处理用户登录时首先需要学习的东西

3. 使用DOM。

   您应该缓存DOM元素，而不是在主函数范围集中始终调用$（’＃id’）

    var emailInput = $("#user_email2"); function submitForm() { var email = emailInput.val().toLowerCase(); ... } 

   你也应该设置元素的text值，而不是html现在没有多大关系，但是因为你设置文本值是一个很好的做法，它将帮助你避免意外的注入和错误。

4. 由于您使用ajax，即使validation成功，也不应让表单自行提交。

5. 应将通用逻辑打包到函数中并重用。

   有许多地方可以将原始代码拆分为更短且可重复使用的function

6. 更好地处理异步代码

   使用ajax请求时，jQuery支持Promise API，我宁愿使用它。 如果您需要在它们之间进行同步，那么您的原始代码会有一些异步调用，使用普通回调会很痛苦（这可能是导致您首先出现问题的原因）

以下是使用我的建议的简化解决方案 –

 $(document).ready(function() { "use strict"; var emailInput = $("#user_email2"), emailError = $("#errormsg6"), passwordInput = $("#user_password2"), passwordError = $("#errormsg7"); function required (value) { if (value) { return true; } else { return false; } //this is just to make the code clear you could use //`return value ? true : false` or `return !!value` } $('form:eq(0)').on('submit', function (e) { var valid = true, email = emailInput.val(), password = passwordInput.val(); e.preventDefault(); if ( !required(email) ) { emailError.text('Email is required'); valid = false; } if ( !required(password) ) { passwordError.text('Password is required'); valid = false; } if ( valid ) { $.ajax({ method: "POST", url: "login.php", data: { email: email, password: password } }).done(function (data, textStatus, jqXHR) { //redirect user to main page }).fail(function (jqXHR, textStatus, errorThrown) { //show the user the error }) } }); });