Использование 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

Вы можете использовать css метод JQuery, чтобы установить background-color на текстовом поле, как этот

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

Если вы хотите изменить цвет текста на красный, вы должны установить color свойство

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

Если вы попытаетесь использовать red !important, он просто НЕИСПРАВЛЯЕТСЯ без ошибок, потому что у jQuery есть проблема u nderstanding !important. Если вам действительно нужно использовать, что, посмотрите на эти обходные пути, но в вашем случае я думаю, что важно, на самом деле не нужны :)

несколько изменений: -

1. Возврат ложна в вашем состоянии, если предотвратить форму от представления в случае сценариев ошибок
2. Проверить для значения URL вместо Directlink, как это не будет работать следующий раз, когда вы размещаете правильный URL, Directlink еще с ошибкой сообщением и форма выиграла» t получать.

Купить сейчас bin.