check input value and add class with jQuery

Question

I am trying to create some simple validation for input. If the input has a value of "abc" I want to add a class red to the input and change text color to red. And somehow I want to stop submit the form.

Here is my code so far:

$(document).ready(function () {
    $('#inputname').click(function () {
        if ($("#inputname").val('abc') {
            $("#inputname").addClass(red);
        } else {
            $("#inputname").removeClass(red);
        }
        });
    });

HTML:

<input type="text" value="abc" name="inputname" id="inputname" class="inputname"
  onblur="if (this.value == ``) {this.value = `abc`;}"
  onfocus="if (this.value == `abc`) {this.value = ``;}" />

CSS:

.red { color: #FF0000;}

JSFiddle: https://jsfiddle.net/n5x4q0bp/

Ushma Shah · Accepted Answer · 2015-09-25 10:44:33Z

1

$(document).ready(function() {
  $('#inputname').focusout(function() {
    if ($("#inputname").val() == 'abc') {
      $("#inputname").addClass('red');
      $('#submit_button').attr('onclick', 'return false;');

    } else {
      $("#inputname").removeClass('red');
      $('#submit_button').removeAttr('onclick');
    }
  });
});

<input type="text" value="" name="inputname" id="inputname" class="inputname" onblur="if (this.value == '') {this.value = 'abc';}" onfocus="if (this.value == 'abc') {this.value = '';}" />
<input type="submit" id="submit_button" />

answered Sep 25, 2015 at 10:44

Ushma Shah

1798 bronze badges

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

2 Comments

Tibby Over a year ago

I had to change $("#inputname").val() == 'abc') to $("#inputname").val() == '') otherwise it was wrong with firefox. but now is all good! Thank you!

Jay Blanchard Over a year ago

Why should the OP "try this"? A good answer will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO.

obojdi · Accepted Answer · 2015-09-25 10:40:17Z

1

.val() is a method to set value. You need to get current value and check it

     if ($("#inputname").val()=='abc') {
        $("#inputname").addClass('red');
    } else {
        $("#inputname").removeClass('red');
    }

answered Sep 25, 2015 at 10:40

obojdi

735 bronze badges

Comments

Sunil · Accepted Answer · 2015-09-25 10:48:36Z

1

here is the running code

  $(document).ready(function () {

    $('#inputname').focusout(function () {

        if ($("#inputname").val()=="abc") {
            alert("value");
            $("#inputname").css("color", "RED");

        } else {
            $("#inputname").css("color", "black");
            // your form submit code here
        }
        });


    });

answered Sep 25, 2015 at 10:48

Sunil

92915 silver badges25 bronze badges

Collectives™ on Stack Overflow

check input value and add class with jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related