Привет, у меня есть форма проверки входа в систему, в которой используется сочетание 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; } }); });
Решение Tried – проблема в том, что когда пользователь помещает неправильное событие, это нормально, но если пользователь затем вводит правильные значения, submit возвращает 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(); } }); });
Вместо того, чтобы иметь кнопку типа = «отправить», есть только обычная кнопка, например <input type="button" name="login" id="login" value="Submit"> . Затем, когда вы закончите проверять ценности и счастливы, что они должны отправить, просто позвоните:
$('[name=loginform]').submit();
Поскольку в настоящее время происходит то, что форма отправляется, когда вы нажимаете кнопку, потому что вы не прекращаете это событие.
Если вы хотите предотвратить отправку формы, я бы предложил либо не использовать эту кнопку, либо инициировать отправку себя, как я упоминал выше, или, альтернативно, вы можете использовать onsubmit = «someFunction ()» на пути элемента формы и просто вернуть false, если он не должен представлять и возвращать истину, если это необходимо.
Я бы сказал, что ваш код страдает от нескольких проблем и некоторых плохих практик. Я вижу, вы пытаетесь научиться JS, поэтому простите меня за то, что я не решал вашу проблему напрямую, но чтобы дать вам несколько указателей и указать на некоторые лучшие практики.
Похоже, вы делаете регистрационную форму. Я бы сказал, что большинство этих проверок не должно происходить в клиенте, а на сервере. Когда пользователь регистрируется, может быть разумным проверить длину имени пользователя на клиенте, а также запросить пользователя о том, что он не может использовать имя пользователя, которое он хочет зарегистрировать, но во время входа в систему все вопросы, связанные с обслуживанием клиентов, – это я могу войти в систему или нет.
У вас, похоже, две серьезные проблемы с безопасностью с вашим кодом
Вы должны кэшировать свои элементы DOM, чтобы вместо вызова $ ('# id') все время в области основной функции
var emailInput = $("#user_email2"); function submitForm() { var email = emailInput.val().toLowerCase(); ... }
Вероятно, вы также должны установить text значение элемента, а не html , теперь это не имеет большого значения, но поскольку вы устанавливаете текстовое значение своей хорошей практикой и поможете избежать неожиданных инъекций и ошибок.
Поскольку вы используете ajax, вы не должны позволять форме отправлять себя, даже когда проверка прошла успешно.
Есть много мест, где ваш исходный код можно разделить на более короткие и многоразовые функции
jQuery поддерживает API Promise при использовании запросов ajax, я бы предпочел использовать его. В вашем исходном коде было несколько асинхронных вызовов, если вам нужно было синхронизировать между ними, было бы больно использовать простые обратные вызовы (и это, вероятно, вызвало у вас проблемы в первую очередь)
Вот упрощенное решение, использующее мои предложения –
$(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 }) } }); });