首页 > 解决方案 > 在 Jquery 中更改颜色输入的错误消息

问题描述

我收到消息错误,但我还希望通过访问函数数据使用 $.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;
}

登录操作.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>

标签: phpjquery

解决方案


  • 从你的 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
  }
});

推荐阅读