CODEWITHSUNDEEP
javascriptjquery
thechrishaddad
thechrishaddad

Reputation: 6735

Using JQuery to change text color on value input if validation fails

I simply want my text in the value input box to change to red if my php validation fails?

how can this be done using JQuery?

I did it using Javascript except every time i click submit it turns red and then disappears...

    <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";      
    }
}

Or I tried the JQuery example below but did nothing.

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

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

});

Upvotes: 0

Views: 10009

Answers (1)

Arkantos
Arkantos

Reputation: 6608

You can use jQuery's css method to set background-color on your text field like this

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

If you just want to change your text color to red, you should set color property

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

If you try to use red !important, it will simply FAIL without any error because jQuery has a problem understanding !important. If you really need to use that, have a look at these workarounds but in your case I think !important is really not needed :)

Few more changes :-

  1. Return false in your if condition to prevent the form from submitting in case of error scenarios
  2. Check for the value of url instead of directLink as it won't work next time you post a valid url, directLink is still with error message and the form won't get submitted.

Here's a bin to play with.

Upvotes: 1

Related Questions