有没有办法在提交表单之前模拟“必需元素”的消息？答案

【问题标题】：Is there a way to simulate messages of "required-elements" before a form is submitted?有没有办法在提交表单之前模拟“必需元素”的消息？
【发布时间】：2019-02-01 08:09:55
【问题描述】：

我在表单中的输入元素上使用了 html5 的 required 属性。通常，当您使用它们并提交表单时，您会收到一条消息，哪些元素无效。

我处于一种特殊情况，需要我在发布之前测试输入字段的状态。（如果一切正常，那么其他人的代码（Wordpress 中的另一个插件）会通过模拟点击另一个提交元素来触发。）

这是相关 jQuery 代码的 sn-p：

var t = $(this);
found_required = false;
 $("input").each(function() {
 if ( $(this).hasClass('required') ) {
    if ($(this).is(":invalid")) {
        t.removeClass('swishmode');                    
        //Tell user this element is required
        found_required = true;
    }
}
});        

if ( found_required == true ) {
    $('form.give-form').attr('action','Javascript:void();'); //Just an attempt
    $(this).click(); //Just an attempt
    return; //Returns user back to form without doing different things below 
}   

//Code to do different things...

我的问题是 - 有没有办法显示默认错误，就像提交带有无效数据的表单时显示的那样？（或者您是否必须为此编写自定义错误处理）

实际代码就像我现在所拥有的那样工作，但用户没有得到指示哪些字段不正确。我知道我可以只为这些输入元素添加一些样式，如果上述方法不可行，我会这样做。

【问题讨论】：

标签： jquery html input message required

【解决方案1】：

处理表单验证的方法有很多种。

但是，我认为您需要在 input、change 或 blur 事件上添加某种事件侦听器，以验证输入并在无效时显示消息。有关使用 constraint validation API 的非常有用的示例，请参阅：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript。

他们还链接到polyfill。

这是input 事件的示例：

var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // Each time the user types something, we check if the
  // email field is valid.
  if (email.checkValidity()) {
    // In case there is an error message visible, if the field
    // is valid, we remove the error message.
    error.innerHTML = ""; // Reset the content of the message
    error.className = "error"; // Reset the visual state of the message
  } else {
    error.innerHTML = "Please enter a valid email.";
    error.className = "error active";
  }
}, false);

input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* This is our style for the invalid fields */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

<label for="mail">Enter Email Address:</label>
<input id='mail' type='email' name='mail' required >
<span class="error" aria-live="polite"></span>

【讨论】：