Как отключить проверку формы HTML5 в Bootstrap для определенных полей - PullRequest
Новая
       18

Как отключить проверку формы HTML5 в Bootstrap для определенных полей

0 голосов
/ 21 мая 2019

У меня есть форма, которая использует Проверка формы HTML5 Bootstrap 4 , как показано ниже: 

(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("myForm");   
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
}());

Одним из полей является текстовый ввод, который использует typeahead.js , чтобы показать список предопределенных тегов, которые пользователь может выбрать, на основе того, что он набрал (аналогично переполнению стека). ). 

//--------- php ---------

<div class="form-group">
    <input type="text" class="form-control" id="tags" value="<?php echo esc_html($tags ?? ''); ?>" data-role="tagsinput" required>
    <small class="form-text">Enter at least one tag</small>
    <div class="invalid-feedback">Please enter at least one tag</div>
</div>

//------- javascript --------

var category_terms = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('term'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: <?php echo json_encode($list); ?>

});

category_terms.initialize();

jQuery('#tags').tagsinput({
    itemValue: 'id',
    itemText: 'term',
    typeaheadjs: {
        name: 'category_terms',
        displayKey: 'term',
        source: category_terms.ttAdapter()
    }
});

jQuery('#myForm').submit(function(e){
    if (jQuery('#tags').val().length == 0 ) {
        jQuery('.bootstrap-tagsinput').addClass('is-invalid');
    } else {
        jQuery('.bootstrap-tagsinput').removeClass('is-invalid').addClass('is-valid');
    }       
});

Если пользователь отправляет форму либо с пустым полем ввода, либо с тегом, отсутствующим в предварительно определенном списке, класс .was-validated применяется к заголовку <span>, в результате чего зеленая галочка отображается рядом с неверным (или пустой) тег.

Tag showing as validated

Есть ли способ предотвратить такое поведение, либо отключив проверку для этого элемента, либо удалив классы .was-validated / is-valid?

Я пробовал разные вещи, в том числе решения (и подобные) решения в этом вопросе .

...