时间戳

首页 > 解决方案 > HTML 表单验证未出现

html - HTML 表单验证未出现

问题描述

这一切都是新的，但本质上我正在尝试通过浏览器默认值使用 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&amp;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();
      });
    }
  });

更新

因此，如果我删除所有 JQuery，则在进行更多测试后，HTML 验证将起作用。一旦我将它添加回来，它就消失了。为什么我的 JS 会破坏 HTML 验证？

标签： htmlcssvalidationbootstrap-4

解决方案

感谢大家的回复。最后我完全选择了 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');
        }
    });

推荐阅读