Jquery Ajax On-Focusout On-Submit - 需要2次点击

时间：2017-03-20 04:53:40

标签： javascript jquery html ajax

您好我有一个jquery和ajax验证表单，当您在密码中填写值（错误的值）x@x.com和1111111时，它会给出ajax验证通知（这很好）但是之后如果您放入值（正确值）example@example.com和12345678它需要两次点击才能提交​​。这意味着如果您先输入错误的值然后输入正确的值，则需要两次单击才能提交​​。以下是代码。我已经设置了下面的代码，因此您可以将代码复制并粘贴到文件中（之前给出的文件名），您将拥有一个可以使用的工作模型。我已经对php验证文件进行了硬编码，因此您可以复制并粘贴代码，看看它是如何工作的。

的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")
                        {
                            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();
        var item5 = item5.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: "validatelogin.php?f=2",
                    data: "user_email2=" + item5 + "&user_password2=" + item6,
                    success: function(msg)
                    {
                        if (msg == "WrongPw")
                        {
                            user_passwordajax2 = "";
                            $("#errormsg7").html("Wrong 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);
    $("#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)");
            console.log("submit false");
            return false;
        }
        else
        {
            $("#errormsg8").html("");
            console.log("submit true");
            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";
?>

尝试过的解决方案 1.延迟提交按钮 2.在Keyup上而不是在Focusout上（这有效但不是必需的） 3.给keyup延迟（无法让它与ajax一起使用 - 但它更接近我的要求，但不完全符合我的要求 4.触发ajax上的点击提交返回true（也没有用）

我需要一些javascript专家来调查并给我解决方案。

1 个答案:

答案 0 :(得分：1)

好吧，我不想变得粗鲁，但所有的代码都有点像灾难。您在3次不同的时间内调用了点击功能，您在每次表单更改和提交时都会对服务器进行ajax调用。然后你实际上为实际的提交函数做了两个单独的ajax调用。

下面的代码更紧凑，只有一个ajax调用，应该工作。我会在每个代码块之前解释一下

您的表单添加了一个id，以便jQuery可以在ajax调用中使用序列化

<form method="post" id="loginform" 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>

validatelogin.php - 这应该只是对服务器的一次调用，将两个函数合二为一，将数据作为json返回而不是回显单个值，这样你得到的对象就是你了可以解析你的jQuery代码。

<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

if(isset($_POST['user_email2'], $_POST['user_password2'] )) {
    $user_password2 = $_POST['user_password2']; 
    $user_email2 = strtolower($_POST['user_email2']);
    if($user_email2 != "example@example.com") {
        $data['email_check'] = 'false';
    } else {
        $data['email_check'] = 'true';
    } 
    $data = array;
    if($user_email2!="example@example.com" && $user_password2!="12345678") {
        $data['password_check'] = 'false';
    } else {
        $data['password_check'] = 'true';
    }
}
print(json_encode($data));

jQuery - 我不确定为什么你会在模糊和点击次数上调用所有这些功能。只需单击一下，调用验证电子邮件，如果通过则继续验证密码，如果通过它，则调用ajax实际检查服务器的详细信息。

还要避免像item5，errormsg6这样的变量名称给另一个没有任何意义的开发人员，并且它在6个月内也不会给你。并且不要告诉人们哪个元素是错误的，即＆＃34;密码不正确＆＃34;只是为了安全，只要告诉他们他们的登录详细信息是错误的。

$(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 email = $("#user_email2").val().toLowerCase();
      var errors = [];

    if (email.length < 6 || email.length > 50) {
        errors.push("Email : 6 - 50 Characters<br>");
    } 

    if (!emailformat.test(email)) {
      errors.push("Wrong Email Format");
    } 
    if( errors.length > 0 ) {
      $("#errormsg6").html(errors);
      return false;
    }
    $("#errormsg6").html();
    validate_password_login();
  }

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

    if (item6.length < 8 || item6.length > 20) {
        $("#errormsg7").html("Password : 8-20 Characters");
        return false;
    }
    $("#errormsg7").html("");
    submitForm();
  }

  var submitForm = function() {
    $.ajax({
      type: 'POST',
      url: 'validatelogin.php',
      dataType: "json",
      data: $("#loginform").serialize(), 
      success: function(msg) {

        if(msg.email_check == 'true' && msg.password_check == 'true') {
            //do whatever it is you want to do on correct login here
        } else {
            $("#errormsg6").html("Your login details are incorrect, please check and try again");
        }
      }
    });
  }


  /* ----------------- Stop on Submit */
  $("#login").on('click', function() {
      errors = [];
    if(validate_email_login() == true) {
        alert("hi");
    }
  });
});

您可以在此处查看jQuery端的错误验证：https://jsfiddle.net/calder12/3fhvpenr/

相关问题
最新问题