如何禁用 css 验证边框

Question

我正在开发一个JQuery函数，当第二个字段被填充时，它会禁用文本框字段，而事实恰恰相反。

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

当我使用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

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

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

Answer 2

我假设您使用jQuery-Validify插件是因为您要删除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.以前的错误现已删除。