I'm having some troubles with Bootstrap 5 and JQuery Validator with custom class.

Seems it works separately from Bootstrap.

In this method for checking hex validity (optional) the .was-validated form class generates problems.

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

Here my code

<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/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>form * { text-align:center; }</style>


<form method="POST"  id="formAA" novalidate="novalidate">

<div >
  <label for="a" >A</label>
  <input type="text"  id="a" name="a" maxlength="100" required="">
</div>
<div >
  <label for="selectcolor" >B</label><br>
  <input  type="color" id="selectcolor" name="selectcolor" value="#0AF000" style="display:inline-block; width:48%; vertical-align: middle; float:left;">
  <input type="text"  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  style="clear:both;"></div>
<button type="submit"  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>

It's more complicated said than done.

So go use fiddle

https://jsfiddle.net/qmsjo3L7/

Insert in the second input a wrong hex, like (wekdne).

You got the error Must be a valid hex.

If you click over the submit button you can see that the errors are recognized

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

but the inputs colors are red for the normal method (input a) and green for the custom method.

Also, if you edit the inputs, the custom method works when the input is changed (keyup or keydown, I don't know) but the normal method works only on submit.

There's someone more able than me that can solve this?

Click on submit

CodePudding user response：

The last <script> block adds an additional submithandler which is causing odd results. Remove that and things immediately improve.

Bootstrap usage is demonstrated at https://github.com/jquery-validation/jquery-validation/blob/master/demo/bootstrap/index-bs4.html, and live demo available at https://jqueryvalidation.org/files/demo/bootstrap/index.html

Implement the errorElement, errorPlacement, highlight and unhighlight directives shown in the above demo and it works as you expect: https://jsfiddle.net/bytestream/dekzfxns/2/