非无效反馈的引导类

Question

有一个类我可以用来表示！无效反馈吗？我想要做的是，在表单输入下有一个占位符，告诉用户这个字段只需要3个字符，如果验证失败，我将添加一个带有无效反馈类的div。我希望它们是相互排斥的，所以要么是占位符，要么是无效的反馈。

例如，

<form:input path="ac" required="required"
    class="form-control text-uppercase" maxlength="3" />
<small class="form-text text-muted">Only three characters are allowed</small>
<div class="invalid-feedback">AC is required</div>

在下面的块中，如果用户输入数据或值有效，我希望显示标记中的内容，如果表单被提交，如果存在验证错误，我希望显示无效反馈div中的内容。

那么，Bootstrap中有一个类基本上是无效的-反馈吗？这是有效的反馈吗？isValid？仅仅使用样式而不是Javascript/jQuery就能做到这一点吗？

Answer 1

有引导类来指示字段有一个错误，但是由于您要求以非引导方式显示错误(即通过隐藏和显示不同的标记)，您将不得不使用Javascript进行自己的验证。

这里有一种方法可以监视输入字段的状态，并隐藏/显示<small>和div.invalid-feedback元素。(请注意，这只是概念的证明，并不能很好地处理用户与输入字段交互的所有可能方式。)

​

$('input').on('input', function() {
    if ($(this).val().length == 3) {
        $('.invalid-feedback').hide()
        $('small').show()
    } else {
        $('.invalid-feedback').show()
        $('small').hide()
    }
})

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

<form>
<input path="ac" required="required"
    class="form-control text-uppercase" maxlength="3" />
<small class="form-text text-muted">Only three characters are allowed</small>
<div class="invalid-feedback">AC is required</div>
</form>

​