如果数据错误，更改输入的背景颜色答案

【问题标题】：Change background color of input if data is wrong如果数据错误，更改输入的背景颜色
【发布时间】：2014-12-25 00:54:10
【问题描述】：

我想在输入数据错误时动态改变输入文本的背景。

这是我的文本字段：

$oForm->formInput(array(
    'id' => 'phone',
    'name' => 'phone',
    'label' => 'telefon',
    'value' => $_POST['phone'],
    'type' => 'tel',
    'size' => '60',
    'maxlength'=>'30',
));

这是一个检查输入数据是否正确的功能。

function checkIfError($field){
    global $oForm;    

    if($_POST["ACT"] == 'checkCorrectness'){
        global $wrong;
        .
        .
        .
        case "phone":
                if(empty($_POST['phone'])){                       
                  <THIS IS A PLACE FOR JAVASCRIPT>
                }else
                  <THIS IS A PLACE FOR JAVASCRIPT>
                }
                break;
      }
}

但是 id 不起作用。输入 JavaScript 代码的位置是否正确？因为即使警报也不起作用。

例如，如果我输入了正确的数字，则输入文本应该是白色的。如果没有输入文本应该是绿色的。我阅读了它并尝试了一些 JavaScript 代码，但现在这些都不起作用。你能帮帮我吗？

编辑：

我在上面的代码中创建了“这是一个 JAVASCRIPT 的地方”：

echo '<script>         
        var phone = $("#phone").val();
                alert(phone);
                if (phone == ""){
                    $("#phone").css("background-color","yellow");
                }                               
 </script>';

我收到一条带有“未定义”文本的警报。 "if" 中的其余指令也不起作用。

【问题讨论】：

不要显示 PHP 代码，而是显示创建的 HTML 标记和您使用的 JavaScript。
你是对的。我编辑了我的帖子。 HTML 标记位于 $oForm->formInput.

标签： php jquery css forms

【解决方案1】：

在您的 html 中使用此代码

<body>
  <input type="text" id="phone" name="txt" value="Hello"/>
    <script type="text/javascript">
       $(document).ready(function(){
       var phone = $("#phone").val();
        if(phone === '')
        {
          $("#phone").css("background-color","yellow");
        }
        else
        {
          $("#phone").css("background-color","red");
        }
    });
    </script>
   </body>

【讨论】：

很好，但我想动态改变颜色。像这样的东西：link。问题是我想在数据不正确时更改颜色。这是上面帖子中标签中的一个地方。我怎样才能正确地做到这一点？
您可以使用正则表达式来检查数据的有效性，如果您的数据有错误，您可以将文本框的背景颜色设置为红色。
您希望文本框在用户输入时或在用户输入完文本框后显示错误（红色背景）
是的。对不起，我的英语不太好，我的解释有些问题。我有一个正则表达式等，但我认为我的问题是 php、html 和 javascript 之间的连接。你的代码很好，但我怎样才能把它放在标签中，这样它就可以正常工作了？
让我们continue this discussion in chat.

【解决方案2】：

我认为最简单的解决方案是在空输入字段中添加一个类，例如添加一个类'error'。

例如，您可以使用 JQuery 检查输入字段：

if('#yourInput').val() === '') {
  $('#yourInput').addClass('error');
}

在你的 CSS 中：

.error {
  background-color:green;
}

【讨论】：

看起来不错，但我在代码中正确放置它时遇到了问题。
放置有什么问题？
这也可能有点帮助：stackoverflow.com/questions/23312702/…
@Robin 我不太清楚。我把它放在上面帖子中的标记中，但这不起作用。即使我创建了一些警报。
你不能只是混合 PHP 和 JQuery，将它添加到