Question

我收到消息错误，但我也希望通过访问函数数据使用$ .post（）在输入中显示红色边框。我通过使用分配给“空字段”的条件数据得到消息

$(document).ready(function(){
    $("#loginButton").click(function(event){
        event.preventDefault();
        var formLogin = $("#formTwo").serialize();

        $.post("loginAction.php", formLogin, function(data){

            if(data === "Empty Field"){
                $("#messageLogin").show("slow", function(){
                    $("#errorLogin").text(data);
                });
            }
            $("#closeTwo").click(function(){
                $("#messageLogin").fadeOut("slow");
            });
        });
    });
});

这是我的表格

<form>
    <input type="text" name="username" id="loginUsername" placeholder="Username" required="required">

    <input type="submit" id="loginButton" value="Login">
</form>

和样式

.errorColor{
    border-color: red;
}

loginAction.php

<?php>
    $name = $_POST["name"];
    $changeColor = FALSE;

    if(empty($name)){
        echo "Empty Field";
        $changeColor = TRUE
    }
    <?
        <script>
            var changeColor = "<?php echo $changeColor;?>;";

            if(changeColor == TRUE){
                $("#loginUsername").addClass("errorColor");
            }
        </script>

Answer 1

尝试以下代码

Script

$(document).ready(function(){
    $("#loginButton").click(function(event){
        event.preventDefault();
        var formLogin = $("#formTwo").serialize();

        $.post("loginAction.php", formLogin, function(data){
            if(data === "Empty Field"){
                $("#messageLogin").show("slow", function(){
                    $("#errorLogin").text(data);
                    $("#loginUsername").addClass("errorColor");
                });
            }
            $("#closeTwo").click(function(){
                $("#messageLogin").fadeOut("slow");
                $("#loginUsername").removeClass("errorColor");
            });
        });
    });
});

Form

<form>
    <input type="text" name="username" id="loginUsername" placeholder="Username" required="required">
    <input type="submit" id="loginButton" value="Login">
</form>

Style

.errorColor {
    border-color: red;
}

loginAction.php

<?php
    $name = $_POST["username"];

    if(empty($name)) {
        echo "Empty Field";
    } else {
    /*Process your form*/
    }
?>

Answer 2

您的html代码中的$_POST["name"]必须为$_POST["username"] ..
在php中回显字符串，然后在ajax回调中检查它

在php

<?php
  $name = $_POST["username"];
  $changeColor = 'FALSE';
  if(empty($name)){
    $changeColor = 'TRUE';
  }
  echo $changeColor;
 <?

和js回调

$.post("loginAction.php", formLogin, function(data){
  var data = data.trim();
  if(data == "FALSE"){
      // Not Error
  }
  if(data == "TRUE"){
     // Error
  }
});

错误消息，在jQuery中输入更改颜色

2 个答案: