HTML форма проверки не появляется

Question

Впервые для всего этого, но по сути я пытаюсь использовать HTML проверку формы через настройки браузера по умолчанию. Форма использует JQuery скрипт для отправки формы. Я просмотрел похожие посты и обновил свой код, но все равно не повезло. Если я нажимаю кнопку «Подписаться», когда ничего не введено, то подсказки не отображаются.

HTML

<form class="form-inline" id="sub-form">
          <div class="flex-fill mr-2">
            <div class="mc-form-group-FNAME" style="display: inline">
              <input type="name" class="form-control required" name="FNAME" id="mce-FNAME" value="" placeholder="First name" required />
            </div>
            <div class="mc-form-group-EMAIL" style="display: inline">
              <input type="email" class="form-control required email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Email address" required />
            </div>
            <button type="submit" class="btn btn-primary" id="subscribe-btn" onclick="submitForm()">Subscribe</button>
          </div>
          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_8a28f24e93a8a23b993145f05_2d6480ea6a" tabindex="-1" value=""></div>
        </form>

JQuery / JS

  //Mail Chimp form submission
  $('#sub-form').MailChimpForm({
    url: 'https://-.us19.list-manage.com/subscribe/post?u=8a28f24e93a8a23b993145f05&id=2d6480ea6a',
    fields: '0:FNAME,1:EMAIL',
    submitSelector: '#subscribe-btn',
    customMessages: {
      E001: 'This field can not be empty',
      E003: 'Please enter a valid email address',
    },
    onFail: (message) => {
      if ((message.indexOf("already") >= 0) || (message.indexOf("recent")) >=0) {
        alert('This email address is already subscribed. Stay tuned for our newsletter!')
      }
    },
    onOk: function() {
      $('#subscribe-ok').modal('show');
      $('#sub-form').each(function() {
        this.reset();
      });
    }
  });

ОБНОВЛЕНИЕ

Итак, после дополнительного тестирования проверка HTML сработает, если я удалю все JQuery. Как только я добавлю его обратно, его уже нет. Любая причина, почему мой JS нарушил бы HTML проверку?

Answer 1

Спасибо всем за ответы. В конце концов я выбрал JQuery полностью и реализовал ToolTipster и JQuery Validate. Финальный код ниже.

$("#sub-form").validate({
      errorPlacement: function(error, element) {
          var ele = $(element),
              err = $(error),
              msg = err.text();
          if (msg != null && msg !== "") {
              ele.tooltipster('content', msg);
              ele.tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
              console.log("form validation attempted")
          }
      },
      unhighlight: function(element, errorClass, validClass) {
          $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
      },
      rules: {
          field1: {
              required: true,
              email: false
          },
          field2: {
              required: true,
              email: true
          }
      },
      submitHandler: function(form) { // for demo
          alert('valid form');
          return false;
      }
  });

//Run validation on form for subscribe attempt
  $('#subscribe-btn').click(function () {
    if ($("#sub-form").valid()) {
            console.log('hello - valid form');
        } else {
            console.log('uh oh invalid form');
        }
    });