Question

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

这是我的TextField：

$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代码但是现在这些都没有用。你能救我吗？

修改

到位＆＃34;这是JAVASCRIPT的地方＆＃34;在上面的代码我创建了：

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

我收到带有文字的警报＆＃34;未定义＆＃34;。其余指令在＆＃34; if＆＃34;也不起作用。

Answer 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>

Answer 2

我认为最简单的解决方案是在空输入字段中添加一个类，例如添加一个类＆＃39;错误＆＃39;。

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

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

在你的CSS中：

.error {
  background-color:green;
}

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

2 个答案: