Hello I have a jquery and ajax validation form, when you fill the values (wrong values) x@x.com and 1111111 in password it will give ajax validation notice (which is fine) but after that if you put in the values (correct values) example@example.com and 12345678 it requires two clicks to submit. Meaning if you put wrong values first and then put correct values then it will require two clicks to submit. following is the code. I have set the code below so you can copy and paste the code into files (filenames given before) and you will have a working model to work with.
index.php
<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post" name="loginform" action="success.php">
<input type="email" class="homepage" name="user_email2" id="user_email2" placeholder="Email" maxlength="50" required />
<div class ="errormsg" id ="errormsg6"></div>
<input type="password" class="homepage" name="user_password2" id="user_password2" placeholder="Password" maxlength="20" required />
<div class ="errormsg" id ="errormsg7"></div>
<input type="submit" name="login" id="login" value="Submit">
<div class ="errormsglast" id ="errormsg8"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="validatelogin.js"></script>
</body>
</html>
validatelogin.js
$(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();
var item5 = item5.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: 'validatelogin.php?f=1',
data: "user_email2=" + item5,
success: function(msg) {
if (msg == "ok") {
$("#errormsg6").html("Email Does Not Exist");
user_emailajax2 = "";
} else if (msg == "exists") {
$("#errormsg6").html("");
user_emailajax2 = item5;
}
}
});
}
}
}
/* ----------------- Define Validate Password */
var validate_password_login = function() {
var item5 = $("#user_email2").val();
var item5 = item5.toLowerCase();
if (item5.length < 1 ) {
$("#errormsg6").html("Email : 6 - 50 Characters");
user_email2 = "";
} else {
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;
$.ajax({
method: "POST",
url: "validatelogin.php?f=2",
data: "user_email2=" + item5 + "&user_password2=" + item6,
success: function(msg) {
if (msg == "WrongPw") {
$("#errormsg7").html("Wrong Password");
user_passwordajax2 = "";
} else if (msg == "CorrectPw") {
$("#errormsg7").html("");
user_passwordajax2 = item6;
}
}
});
}
}
}
/* ----------------- Run Functions */
$("#user_email2").on('focusout', validate_email_login);
$("#user_password2").on('focusout', validate_password_login);
$("#login").on('click', validate_email_login);
$("#login").on('click', validate_password_login);
/* ----------------- Stop on Submit */
$("#login").on('click', function() {
if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "") {
$("#errormsg8").html("Please Fill All Fields (Correctly)")
return false;
} else {
return true;
}
});
});
validatelogin.php
<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if($_GET['f']==1) {
if(isset($_POST['user_email2'])) {
$user_email2 = strtolower($_POST['user_email2']);
if($user_email2 == "example@example.com") {
echo "exists";
} else {
echo "ok";
}
}
}
if($_GET['f']==2) {
if(isset($_POST['user_email2'], $_POST['user_password2'] )) {
$user_email2 = strtolower($_POST['user_email2']);
$user_password2 = $_POST['user_password2'];
if($user_email2!="example@example.com" and $user_password2!="12345678") {
echo "WrongPw";
} elseif($user_email2=="example@example.com" and $user_password2=="12345678") {
echo "CorrectPw";
}
}
}
?>
success.php
<?php
echo "Login Successful";
?>
I have tried the following but it does not work Have tried the following things
Renaming $("#login").click(function() to $("#login").on( "click", function()
$("#login").trigger("click"); - after return true and before return true
$( "#login" ).click(); - after return true and before return true
<input type="button" name="login" id="login" value="Submit"> - changing the submit to button