logo标签列表

HTML5中的验证：提交后的:invalid类

formshtmlcss
32

我正在构建一个表单，想要使用:invalid选择器，如果用户在提交时没有填写"必填"的输入字段，则给这些字段添加红色边框，但是使用这个选择器会导致在页面加载时就已经出现突出显示。在让用户至少填写一次之前，给他们这种警告似乎不太友好。

有没有办法只在尝试提交表单后突出显示这些字段，换句话说，是否有一种方法只在单击提交按钮（或至少失去焦点在必填输入字段上）后才运行验证？

使用:invalid伪类来为不支持JavaScript的用户提供样式，并为支持JS的用户覆盖它，使用真正的类。 - zzzzBov
15个回答
1
我在我的网站上尝试了这个：

。

<style id="validation"></style>
<script>
function verify() {
    document.getElementById("validation").innerHTML = "input:invalid { border: 1px solid red!important;}input:valid { border: 1px solid green;}";
    }
</script>

然后在提交按钮上添加onclick="verify()"，就像这样：

<input type="submit" onclick="verify()">
0

针对“必填”验证

方法1 - 在表单提交时为每个元素设置“required”属性

// submit button event
$('#form-submit-btn').click(function(event) {
    // set required attribute for each element
    $('#elm1, #elm2').attr('required','true');

    // since required attribute were not set (before this event), prevent form submission
    if(!$('#form')[0].checkValidity())
        return;

    // submit form if form is valid
    $('#form').submit();

});

方法二 - 使用 'data' 属性

<input type="text" data-required="1">

<script type="text/javascript">
// submit button event
$('#form-submit-btn').click(function(event) {
    // set required attribute based on data attribute
    $(':input[data-required]').attr('required','true');

    // since required attribute were not set (before this event), prevent form submission
    if(!$('#form')[0].checkValidity())
        return;

    // submit form if form is valid
    $('#form').submit();

});
</script>
0
等待 onSubmit 或“submit” 事件监听器的问题是，当输入数据为 false 时，表单本身从技术上永远不会被提交。我所做的（在 React 中，但同样的原则）是在提交按钮上设置一个点击监听器，然后设置一个类名为“submitted”，然后相应地应用这些类。
 .submitted input:invalid{
    outline: 2px solid red; /* oranges! yey */
}
0

在之前的答案基础上进行扩展：不必向表单添加一个class来指示是否显示:invalid样式，而是可以使用隐藏的input。优点是当表单被清除（通过type=reset按钮或通过javascript）时，:invalid样式会自动消失。当然，你可以添加另一个事件处理程序来在重置时删除类；这只是我的个人偏好。

请注意，要以这种方式执行操作，您必须使用不可见的复选框而不是隐藏元素，并明确更改已选中的property。通过javascript更改输入的值或属性会更改.reset()所涉及的默认值。如果您没有在虚拟元素上放置名称，则它将不会随表单一起发布，但您仍然可以通过id或class通过javascript访问它。

#attemptedSubmit[value=Yes] ~ :invalid, 
#attemptedSubmit[value=Yes] ~ * :invalid {
  border: 1px solid red;
}
<form>
   <input type="checkbox" style="display:none;" id="attemptedSubmit">
  ... rest of the form
  <input type="text" name="text" required>
  ... rest of the form
  <input type="submit" value="Submit" onclick="$('#attemptedSubmit').prop('checked', true)">
  <input type="reset" value="Clear">
</form>

0
只使用CSS来实现这一点的方法是使用以下属性，它允许对未聚焦（input和input:placeholder）、聚焦、有效和错误进行样式设置，而无需在用户输入之前或为空输入时设置错误样式。 显然，这需要一个占位符。
input:invalid:not(:placeholder-shown) {
    font-size: 1em;
    border-radius: 4px;
    color: var(--form-txt);
    background-color: var(--secondary);
    box-shadow: 0 0 10px var(--error);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接