Question

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

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

以下是相关的jQuery代码的片段：

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...

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

实际代码按我现在的方式工作，但是用户没有任何指示，指出哪些字段不正确。我知道我可以为这些输入元素添加某种样式，如果上述操作不可能，我会这样做。

Answer 1

有多种方法可以处理表单验证。

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

它们还链接到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>

提交表单之前，有没有一种方法可以模拟“必需元素”的消息？

1 个答案: