CODEWITHSUNDEEP
jquery
Guwanch
Guwanch

Reputation: 375

Jquery conditional selector

I have a problem with conditional selector. I have some inputfields. I want change border color of empty fields with required attribute.

What I tried:

$("[required='required']").css({
      "border": "1px solid #FF0000",
      "background": "#FFEFFF"
  });

  $("[required='required']").blur(function ()  {
    comp(this);
  });

$("[required='required']").keyup(function ()  {
    comp(this);
  });

$("[required='required']").click(function ()  {
    comp(this);
  });

  function comp(a) {
      if ($(a).val() !== "")
          $(a).css({
          "border": "1px solid #ccc",
          "background": ""
      });

      else $(a).css({
          "border": "1px solid #FF0000",
          "background": "#FFEFFF"
      });

  }

Here is a link to: http://jsfiddle.net/guwanchat/HjzVu/14/

Upvotes: 0

Views: 1663

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

I think your problem is you don't initialize your elements according to the comp function.

I modified your starting code from this:

$("[required='required']").css({
      "border": "1px solid #FF0000",
      "background": "#FFEFFF"
});

to this:

$("[required='required']").each(function () {
    comp(this);
});

I use the jQuery each function to iterate the objects that match the selector and call the comp function to initialize them.

jQuery.each()

Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

Here is a fiddle: http://jsfiddle.net/HjzVu/19/

Upvotes: 1

Related Questions