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

Question

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'});
  }

});

thats the javascript I used that works but only temporarily, after i click it turns red then returns to default value. — thechrishaddad
– thechrishaddad, Commented Mar 22, 2015 at 11:28
First off, if you'd want the text color to change, then it's style.color = "red"; — lshettyl
– lshettyl, Commented Mar 22, 2015 at 11:30
Please provide whole code. Do you use ajax for data sending? — sinisake
– sinisake, Commented Mar 22, 2015 at 12:00

Arkantos · Accepted Answer · 2015-03-22 14:02:52Z

1

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

Return false in your if condition to prevent the form from submitting in case of error scenarios
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.

edited Mar 22, 2015 at 14:02

answered Mar 22, 2015 at 11:59

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

thechrishaddad Over a year ago

Hmmm, it works in the bin, but when im doing it in my own form it does not change if text === 'Invalid, Please insert the correct Link'. How do i get the javascript to check if text is equivalent after submit, so after it is in the input box.

Arkantos Over a year ago

Do you see any errors in console ? It would be better if you can add your textbox html and jquery code you tried. Pls edit and add it to your question

Arkantos Over a year ago

color in css means font color, as your text box is empty, it will change the cursor in your text box to red, you have to pay attention to notice that. If you really want to give some visual feedback to user, you should change background-color not color

Arkantos Over a year ago

Also you're the checking the value of url but changing directLink.. is that your intent ? check value of an input box in form and highlight some other box ?

Arkantos Over a year ago

Any specific reason for using !important. You're not supposed to use that unless you inherit some styles for which you don't have to access to :)

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related