如何禁用css验证边框

Question

我正在开发一个JQuery函数，当第二个字段被填充时禁用TextBox字段，反之亦然。

换句话说，它将输入限制为仅一个字段。

问题是，当我测试两个字段中的一个（输入仅限于数字）中有一个caractere，然后我再次将它变为空并转到该字段时，红色边框仍显示在第一个字段周围，尽管它有被禁用了。

我试图删除规则，但它没有用。

码：

 $("#FirstId").on('input', function () {
        if ($(this).val() != "") {
            $('#SecondId').prop("disabled", true);
        }
        else {
            $('#SecondId').prop("disabled", false);

        }
    })

    $("#SecondId").on('input', function() {
        if ($(this).val() != "") {
            $('#FirstId').prop("disabled", true);
        }
        else {
            $('#FirstId').prop("disabled", false);
        }
    })

    $("#SecondId").on('input', function ClearValidation() {

            $('#FirstId').rules('remove');

    })

Answer 1

我假设你使用jQuery-Validate插件，因为你试图删除rules ...你应该提到插件的用法。

我做了一些可能与你对标记有关的东西......而且我大大“减少了”你的代码。看一看：

var first = $('#FirstId');
var second = $('#SecondId');

first.on('input', function () {
  // Enable/disable the other input
  second.prop("disabled", $(this).val() != "");
});

second.on('input', function() {
  // Enable/disable the other input
  first.prop("disabled", $(this).val() != "");
  // Remove validation error
  first.removeClass('error');
  first.next("label.error").remove();
});

$("#myForm").validate({
  rules:{
    FirstId: "number"
  }
});

input.error{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myForm">
  <input id="FirstId" name="FirstId" required><br>
  <input id="SecondId" name="SecondId" required><br>
</form>

所以在#FirstId中输入一个字母......然后将其删除。它将显示有关“必需”的错误消息。然后输入#SecondId。现在删除了上一个错误。

Answer 2

这是你想要的吗？如果您禁用红色边框，则在禁用该输入时仅删除无效类

$("#FirstId").on('input', function () {
        if ($(this).val() != "") {
        $("#FirstId").removeClass("disabled");
        $("#SecondId").removeClass("invalid");
            $('#SecondId').prop("disabled", true);
        }
        else {
            $('#SecondId').prop("disabled", false);
        }
        
        if ($(this).val() == "") {
          $("#FirstId").addClass("invalid");
        } else {
          $("#FirstId").removeClass("invalid");
        }
    })

    $("#SecondId").on('input', function() {
        if ($(this).val() != "") {
        $("#FirstId").removeClass("invalid");
            $('#FirstId').prop("disabled", true);
        }
        else {
        
            $('#FirstId').prop("disabled", false);
        }
        
        if ($(this).val() == "") {
          $("#SecondId").addClass("invalid");
        } else {
          $("#SecondId").removeClass("invalid");
        }
    })

  

.invalid{
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="FirstId">
<input type="number" id="SecondId">