border - color not working but background - color working-CodePudding

So I have this validation on save that if user enters the same ranges twice against a particular type then it shows an alert with message Duplicates found. I also wanted to show red border around those text boxes with duplicates. So I added a class to those textboxes if the validation is failed. How ever it does not show me the red border.

 .is-invalid {
     border-color: 1px solid red;
 }

  
$(this).find('td:eq(3)').find('input').addClass("is-invalid");

When I change my css to

 .is-invalid {
   background -color:  red;
 }

my code :

  var obj = dict[CustomerTypeCode];
  if (MinVal >= obj.MinVal && MaxVal <= obj.MaxVal) {
    valid = false;
    ErrMsg = "Duplicate Ranges Found";
    alert(ErrMsg);
$(this).find("td:eq(3)").find("input").addClass("is-invalid");
  } else {
    $(this).find("td:eq(3)").find("input").removeClass("is-invalid");
  }
} else {
  dict[CustomerTypeCode] = {
    MinVal: MinVal,
    MaxVal: MaxVal
  };

its working fine. Why is this happening?

CodePudding user response：

Should be replaced border-color to border

.is-invalid {
  border: 1px solid red;
}

CodePudding user response：

my background-color is working. The problem is with border

You must have another issue. My guess is that $(this) in your code should have been tr from

var tr = $(`#${id}`);

Using border works

Your row MUST be wrapped in a table

$("tr").on("click", function() {
  valid = false; // from your calculations
  $(this).find("td:eq(3)").find("input").toggleClass("is-invalid", !valid);
})

.is-invalid {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td>Click</td>
    <td><input value="1" /></td>
    <td><input value="2" /></td>
    <td><input value="3" /></td>
    <td><input value="4" /></td>
  </tr>
</table>

Like this

function OnChangedAction(key, id) {
  console.log("here")
  var tr = $(`#${id}`);
  if ($.trim(tr.find("td:eq(0)").html()) != "No Data.") {
    if (dict[CustomerTypeCode]) {
      if (MinVal >= obj.MinVal && MaxVal <= obj.MaxVal) {
        valid = false;
        ErrMsg = "Duplicate Ranges Found";
        alert(ErrMsg);
      }
      tr.find("td:eq(3)").find("input").toggleClass("is-invalid", !valid);
    }
    ...