CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hermes Djohar
Hermes Djohar

Reputation: 121

How to change CSS placeholder color after being changed with Javascript

How to change CSS placeholder background-color after it's text was changed with JavaScript?

I want to make input validation I have set style when input form is invalid. But it doesn't work after placeholder text was changed by javascript.

It works after user fill the input again

CSS

.common-form input[type="text"]:invalid:focus,
.common-form input[type="email"]:invalid:focus,
.common-form input[type="number"]:invalid:focus,
.common-form input[type="search"]:invalid:focus,
.common-form input[type="password"]:invalid:focus,
.common-form textarea:invalid:focus,
.common-form select:invalid:focus { 
  border-color: rgb(248,66,66);
  background-color: rgb(248,46,46);
  color: #fff;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
}

JAVASCRIPT

$("#dftrnama").change(function () {
    $.ajax({
        url: "ajax/ceknama",
        data: {
            "nama": $(this).val()
        },
        method: "POST",
        success: function (result) {
            if (result == '1') {
                $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus().blur();
                $("input[type='submit']").attr("disabled", true);
                $("#dftremail").attr("disabled", true);
                $("#dftrhp").attr("disabled", true);
            } else {
                $("input[type='submit']").removeAttr("disabled");
                $("#dftremail").removeAttr("disabled");
            }
        }
    });
});

Upvotes: 0

Views: 2045

Answers (3)

Satpal
Satpal

Reputation: 133403

You don't need to call blur(), when method is invoke the element loses focus thus CSS rules are not applied.

$("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus();


 
//To simulate `$.ajax()`
setTimeout(function() {
  $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus();
}, 5000)
.common-form input[type="text"]:invalid:focus,
.common-form input[type="email"]:invalid:focus,
.common-form input[type="number"]:invalid:focus,
.common-form input[type="search"]:invalid:focus,
.common-form input[type="password"]:invalid:focus,
.common-form textarea:invalid:focus,
.common-form select:invalid:focus {
  border-color: rgb(248, 66, 66);
  background-color: rgb(248, 46, 46);
  color: #fff;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="dftrnama" value="test">

Upvotes: 1

pandamakes
pandamakes

Reputation: 591

Perhaps:

$("#dftrnama").change( function(){
  $.ajax({
    url: "ajax/ceknama",
    data: { "nama" : $(this).val() } ,
    method: "POST",
    success: function(result){
        if( result == '1') {
            $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus().blur();
            $("input[type='submit']").attr("disabled", true);
            $("#dftremail").attr("disabled", true);
            $("#dftrhp").attr("disabled", true);
        } else {
            $("input[type='submit']").removeAttr("disabled");
            $("#dftremail").removeAttr("disabled");
            $('#dftrnama').css('background-color','#FFF')
        }
    }
});

Upvotes: 0

AceWebDesign
AceWebDesign

Reputation: 589

$('.elementclass').css('background-color','blue');

Add that to your javascript at the right point in your application.

I'm assuming that's what you meant

Upvotes: 0

Related Questions