当被验证的类处于活动状态时，通过Bootstrap使用自定义.addMethod的JQuery Validator会出现

Question

我在使用Bootstrap 5和带有自定义类的JQuery Validator时遇到了一些问题。

它似乎与Bootstrap分开工作。

在这种检查十六进制有效性(可选(的方法中，.was-validated形式类会产生问题。

jQuery.validator.addMethod("isvalidhex", function(value, element) {
return this.optional(element) || value.match(/^#[a-f0-9]{6}$/i) !== null;
}, "Must be a valid hex");

这是我的代码

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>form * { text-align:center; }</style>

<form method="POST" class="needs-validation" id="formAA" novalidate="novalidate">
<div class="mb-3">
<label for="a" class="form-label">A</label>
<input type="text" class="form-control form-control-lg text-center" id="a" name="a" maxlength="100" required="">
</div>
<div class="divdropdowncolor mb-3 text-center">
<label for="selectcolor" class="form-label">B</label><br>
<input class="form-control form-control-lg" type="color" id="selectcolor" name="selectcolor" value="#0AF000" style="display:inline-block; width:48%; vertical-align: middle; float:left;">
<input type="text" class="form-control form-control-lg text-center error" id="selectcolorB" name="selectcolorB" placeholder="#FFFFFF" maxlength="7" style="display:inline-block; width:48%; vertical-align: middle; float:right;" col="7" aria-invalid="true">
</div>
<div class="mb-3" style="clear:both;"></div>
<button type="submit" class="btn btn-primary form-control-lg" style="width:100%;">Submit</button>
</form>
<!-- scripts -->
<script>
function isValidColor(str) { return str.match(/^#[a-f0-9]{6}$/i) !== null; }
$(document).ready(function() {
$('#selectcolorB').val($('#selectcolor').val());
});
$('#selectcolor').on('change', function (event) { $('#selectcolorB').val($('#selectcolor').val()); });
$('#selectcolorB').on('change', function (event) { if( isValidColor($('#selectcolorB').val()) ) { $('#selectcolor').val($('#selectcolorB').val()); } });
</script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
jQuery.validator.addMethod("isvalidhex", function(value, element) {
return this.optional(element) || value.match(/^#[a-f0-9]{6}$/i) !== null;
}, "Must be a valid hex");
$('#formAA').validate({
rules: {
selectcolorB : { isvalidhex : true },
bgcolor : { isvalidhex : true }
},
submitHandler: function(form, e) {
console.log('The form is valid and would have been submitted successfully');
}
});
</script>
<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
//form.classList.remove('was-validated')
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

说起来比做起来复杂。

所以去使用小提琴

https://jsfiddle.net/qmsjo3L7/

在第二个输入中插入错误的十六进制，如(wekdne(。

您得到的错误必须是有效的十六进制。

如果你点击提交按钮，你可以看到错误被识别

1) This field is required.
2) Must be a valid hex

但是输入颜色对于正常方法(输入a(是红色，而对于自定义方法是绿色。

此外，如果您编辑输入，自定义方法在输入更改时有效(我不知道是向上键还是向下键(，但常规方法仅在提交时有效。

有人比我更有能力解决这个问题吗？

点击提交

Answer 1

最后一个<script>块添加了一个额外的子处理器，这会导致奇怪的结果。去掉它，情况就会立即好转。

Bootstrap的使用在https://github.com/jquery-validation/jquery-validation/blob/master/demo/bootstrap/index-bs4.html，以及在上提供的实时演示https://jqueryvalidation.org/files/demo/bootstrap/index.html

实现上面演示中显示的errorElement、errorPlacement、highlight和unhighlight指令，它的工作方式与您预期的一样：https://jsfiddle.net/bytestream/dekzfxns/2/