Validating table data with jquery and css

Question

I'm creating a table that'll make extensive use of <input type="number"> fields and I want to make the background color of the table turn red if a number isn't placed inside.

Here's example html for my table:

<tr>
  <td>
      <input type="number" class="amount" name="amount">
  </td>
</tr>

Here's the jquery code I'm using to validate the input:

$(".amount").blur(function() {
   if ($(this).val() ==="") {
      $(this).parents("td").css("background-color", "#CDC9C9");
    }
});

This works fine if an incorrect value is entered the first time, but if you change the input until it's correct the background-color doesn't change.

I'd think jquery would evaluate the blur method each time something is changed but that's not the case. Why?

Also, my tablerows have alternating background colors, so I'd prefer not to get into something too complicated with setting the background color as that might backfire.

Code snippet here:

$(".amount").blur(function() {
  if ($(this).val() === "") {
    $(this).parents("td").css("background-color", "#CDC9C9");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>
    <input type="number" class="amount" name="amount">
  </td>
</tr>
</table>

you can use input event instead of blur.. how about that?

Brijesh Bhatt
– Brijesh Bhatt

2015-04-09 05:29:18 +00:00
Commented Apr 9, 2015 at 5:29 — Brijesh Bhatt
– Brijesh Bhatt, Commented Apr 9, 2015 at 5:29
@BrijeshBhatt -which one would you recommend?

Jonathan Bechtel
– Jonathan Bechtel

2015-04-09 05:31:26 +00:00
Commented Apr 9, 2015 at 5:31 — Jonathan Bechtel
– Jonathan Bechtel, Commented Apr 9, 2015 at 5:31
i will recomment input event..

Brijesh Bhatt
– Brijesh Bhatt

2015-04-09 05:32:48 +00:00
Commented Apr 9, 2015 at 5:32 — Brijesh Bhatt
– Brijesh Bhatt, Commented Apr 9, 2015 at 5:32

You Old Fool · Accepted Answer · 2020-01-03 21:49:06Z

1

The change event fires anytime an input has changed and is blurred. The input event fires with every keystroke. You can use either to add and remove a class that gives the correct background color like this:

$(".amount").on("change", function() {
    if ($(this).val() === "") {
        $(this).closest("td").addClass("red-class");
    } else {
        $(this).closest("td").removeClass("red-class");
    }
});

And add some CSS:

<style>
    .red-class {
        background-color: red;
    }
</style>

edited Jan 3, 2020 at 21:49

answered Apr 9, 2015 at 5:33

You Old Fool

23.2k14 gold badges92 silver badges118 bronze badges

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

2 Comments

Jonathan Bechtel Over a year ago

I went ahead and used the addClass/removeClass method with blur and it worked just fine.

You Old Fool Over a year ago

That's good.. I've found blur can behave differently depending on the device and change gives basically the same effect but more a bit more consistently. Also change does nothing if the actual value of the input didn't change when blurred - which is a bit less expensive.

Goran Stoyanov · Accepted Answer · 2020-01-04 02:27:55Z

0

Try key events such as keyup or keypress or keydown on input fields. Call that blur function of yours inside this event. Example :

$(".amount").keyup(function() {
  if ($(this).val() == "") {
    $(this).parents("td").addClass("redClass");
  } else {
    $(this).parents("td").addClass("greenClass");
  }
});

.redClass {
  background-color: red;
}

.greenClass {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="number" class="amount" name="amount">
    </td>
  </tr>
</table>

edited Jan 4, 2020 at 2:27

Goran Stoyanov

2,3111 gold badge22 silver badges32 bronze badges

answered Apr 9, 2015 at 5:35

ngrj

3171 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Validating table data with jquery and css

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related