代码之家 › 专栏 › 技术社区 › Exact

如何禁用css验证边框

css jquery

Exact · 技术社区 · 6 年前

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

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

问题是,当我用一个字符测试两个字段中的一个(输入仅限于数字),然后再次将其置空并转到该字段时,尽管第一个字段已被禁用,但红色边框仍显示在其周围。

我试图取消规则,但没有成功。

代码:

 $("#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');

    })

2 回复 | 直到 6 年前

Louys Patrice Bessette 6 年前

我猜你用的是 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 ... 然后取下它。它将显示一条关于“required”的错误消息。然后输入 #SecondId . 上一个错误现在被删除。

BeeBee8 6 年前

$("#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">