title: Using JQuery to change text color on value input if validation fails
body: <p>I simply want my text in the value input box to change to red if my php validation fails?</p>
  
  <p>how can this be done using JQuery?</p>
  
  <p>I did it using Javascript except every time i click submit it turns red and then disappears...</p>
  
  <pre><code>    &lt;form class="link-form" method="post" action=""&gt;
      &lt;label&gt;DIRECT LINK&lt;/label&gt;
      &lt;input type="text" id="url" name="url" value="&lt;?php if(isset($_POST['url'])) { echo htmlspecialchars($_POST['url']); } ?&gt;" /&gt;
      &lt;input class="btn-submit" type="submit" id="submit" name="submit" value="Generate Direct Link" /&gt;   
      &lt;?php
          $directLink = "";
          $error = "";
          $url = $_POST['url'];
          if(isset($_POST['submit'])) {
              $partsUrl = parse_url($url);
  
              if ($partsUrl["scheme"] === "https://" &amp;&amp; $partsUrl["host"] === "example.com/") 
              {
                  $key = substr($partsUrl["path"],8,-5);
                  $directLink = "https://example.com/".htmlspecialchars($key);    
              }
              else
              {
                  $error = "Invalid, Please insert the correct Link";
              }
          }
      ?&gt;
      &lt;label&gt;DIRECT LINK&lt;/label&gt;
      &lt;input type="text" id="directLink" name="directLink" value="&lt;?php if (!empty($directLink)) { echo $directLink; } else { echo $error; } ?&gt;" /&gt;
  &lt;/form&gt;
  
  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";      
      }
  }
  </code></pre>
  
  <p>Or I tried the JQuery example below but did nothing.</p>
  
  <pre><code>$('#submit').on('click',function(){
  
    var text = $('#directLink').val();
    if(text === 'Invalid, Please insert the correct Link'){
      $('#directLink').css({'background-color':'red !important'});
    }
  
  });
  </code></pre>