Validating html input contingent on other value in table with jquery

Question

I'm creating a table that's trying to combine two forms of conditional logic:

1). enabling/disabling a field depending on the < select > value from a dropdown from another td in the row.

2). Using the blur method to change the CSS of that same field if it's not filled out correctly AND enabled. If it's disabled I want jQuery to disregard the validity of the input since it won't be used later on in the program.

I have two functions that work fine separately but when I try and combine them they don't work correctly.

Here's sample HTML:

<tr class="formulaRow">
   <td>
   <select class="tableDropDown">
       <option value="other">The Manufacturer</option>
       <option value="me">Me</option>
   </select>
   </td>
   <td>
      <input class="packSize" type="number" disabled>
   </td>
</tr>

Here's the jquery function to enable/disable the ".packSize" input based on the dropdown:

$(".tableDropDown").on('change', function(){
  var packSize = $(this).parents('.formulaRow').find('.packSize');
if ($(this).val() === "me") {
  $(packSize).prop('disabled', false);
} else {
  $(packSize).prop('disabled', true);
}
});

Here's the jquery for changing the background color if the input is not a number in ".packSize"

$(".packSize").blur(function() {
var tableDropDown = $(this).parents(".formulaRow").find(".tableDropDown");
if ($(this).val() ==="" && $(tableDropDown).val() === "me") {
    $(this).parents("td").addClass("redClass");
}

else {
    $(this).parents("td").removeClass("redClass");
}
});

I've also tried to use && $(this).prop("disabled", false) in the if statement but it didn't work either.

The issue is that, if you disable the input field and it has redClass attached to it, it doesn't detach and still has a red background.

I want redClass to automatically toggle off if .packSize is disabled.

em_ · Accepted Answer · 2015-04-09 18:08:44Z

1

http://jsfiddle.net/Lgyjfq79/

Hopefully this will work for you.

I just referenced the parent td element again and removed the class. Even if it isn't there, you can still "remove" it.

$(".tableDropDown").on('change', function(){
  var packSize = $(this).parents('.formulaRow').find('.packSize');
  if ($(this).val() === "me") {
    $(packSize).prop('disabled', false);
  } else {
    $(packSize).prop('disabled', true);
    $(packSize).parents('td').removeClass("redClass");
  }
  });

$(".packSize").blur(function() {
var tableDropDown = $(this).parents(".formulaRow").find(".tableDropDown");
if ($(this).val() ==="" && $(tableDropDown).val() === "me") {
  $(this).parents("td").addClass("redClass");
}

else {
  $(this).parents("td").removeClass("redClass");
}

answered Apr 9, 2015 at 18:08

em_

2,2792 gold badges27 silver badges41 bronze badges

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

2 Comments

Jonathan Bechtel Over a year ago

Thank you for this. One question: if I toggle back and forth between the two dropdown values, it doesn't go back to adding .redClass once it's enabled again. I'm guessing this means there's something in my IF statement that's not reading correctly but I'm not sure what it is. Any ideas?

em_ Over a year ago

That question is a matter of how you interpret the user's actions. If the user were to switch from "Me" (with redClass) to "the manufacturer" you would assume that they changed their mind and the situation is reset. Then if they were to toggle BACK then you would give them the opportunity to provide valid data - otherwise you'd add the class again. It's really up to you. If you want to check and see if the class previously had the redClass then you'd need some additional logic.

Collectives™ on Stack Overflow

Validating html input contingent on other value in table with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related