如果驗證失敗，則使用JQuery更改值輸入上的文本顏色

Question

如果我的php驗證失敗，我只是希望我在值輸入框中的文本更改為紅色？

如何使用JQuery完成？

我使用Javascript做到了，除了每次單擊提交時它都會變成紅色然后消失...

    <form class="link-form" method="post" action="">
    <label>DIRECT LINK</label>
    <input type="text" id="url" name="url" value="<?php if(isset($_POST['url'])) { echo htmlspecialchars($_POST['url']); } ?>" />
    <input class="btn-submit" type="submit" id="submit" name="submit" value="Generate Direct Link" />   
    <?php
        $directLink = "";
        $error = "";
        $url = $_POST['url'];
        if(isset($_POST['submit'])) {
            $partsUrl = parse_url($url);

            if ($partsUrl["scheme"] === "https://" && $partsUrl["host"] === "example.com/") 
            {
                $key = substr($partsUrl["path"],8,-5);
                $directLink = "https://example.com/".htmlspecialchars($key);    
            }
            else
            {
                $error = "Invalid, Please insert the correct Link";
            }
        }
    ?>
    <label>DIRECT LINK</label>
    <input type="text" id="directLink" name="directLink" value="<?php if (!empty($directLink)) { echo $directLink; } else { echo $error; } ?>" />
</form>

function colorChange() {
    var inputVal = document.getElementById("directLink").value;
    if (inputVal === "Invalid, Please insert the correct Link") {
        document.getElementById("directLink").style.backgroundColor = "red";
    }
    else
    {
        document.getElementById("directLink").style.backgroundColor = "black";      
    }
}

或者我嘗試了下面的JQuery示例，但是什么也沒做。

$('#submit').on('click',function(){

  var text = $('#directLink').val();
  if(text === 'Invalid, Please insert the correct Link'){
    $('#directLink').css({'background-color':'red !important'});
  }

});

Answer 1

您可以使用jQuery的css方法在文本字段上設置background-color ，如下所示

$('#directLink').css({'backgroundColor':'red'});

如果只想將文本顏色更改為紅色，則應設置color屬性

$('#directLink').css({'color':'red'});

如果您嘗試使用red !important ，它將簡單地失敗而不會出現任何錯誤，因為jQuery在理解!important遇到了問題。 如果您確實需要使用它，請查看以下變通方法，但就您而言，我認為！important確實不是必需的:)

少量更改：-

1. 在if條件中返回false，以防止在出現錯誤情況時提交表單
2. 檢查url而不是directLink的值，因為下次您發布有效的url時它將不起作用，directLink仍然顯示錯誤消息，並且不會提交表單。

這是一個垃圾箱 。