Forms HTML5中的验证：提交后的类无效

我正在构建一个表单，我想使用

：invalid

选择器为“必需”输入字段提供一个红色边框，如果用户在未填写字段的情况下按submit，则使用该选项会使它们在页面加载时显示为高亮显示。在给用户至少一次填充的机会之前，给用户这样的警告似乎是不友好的

---

是否有一种方式可以使这些字段仅在尝试提交表单后才突出显示，换句话说，是否有一种方式可以仅在单击提交后运行验证（或者至少在所需输入字段上失去焦点？

否没有现成的内容

Mozilla有它自己的伪类，这个伪类叫做“：-moz-ui-invalid”。如果要实现类似的目标，必须使用约束验证DOM-API：

if(document.addEventListener){
    document.addEventListener('invalid', function(e){
        e.target.className += ' invalid';
    }, true);
}

---

您还可以使用，它不仅可以填充无法使用的浏览器，还可以为所有浏览器添加类似-moz ui invalid（.form ui invalid）的内容。

另一种方法是在加载JavaScript的情况下向输入添加

隐藏提示

类。当用户修改字段时，将删除该类

---

然后在CSS中将样式应用于

输入：not（.hide hints）：invalid

。这意味着错误样式也将为没有JavaScript的用户显示。

用于“必需”验证

方式1-为表单提交中的每个元素设置“必需”属性

// 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();

});

方式2-使用“数据”属性

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

//提交按钮事件
$（“#表单提交btn”）。单击（函数（事件）{
//根据数据属性设置所需属性
$（'：输入[所需数据]）.attr（'required'，'true'）；
//由于未设置必需的属性（在此事件之前），因此阻止表单提交
if（！$（'#form'）[0].checkValidity（）
返回；
//如果表格有效，请提交表格
$（'表格'）.submit（）；
});

这是一个老问题，但对于可能会发现它有用的人来说：我制作了一个小脚本，在尝试提交表单时将类添加到表单中，这样您就可以对尝试提交和未提交的表单进行不同的样式设置：

window.addEventListener('load', function() {

    /**
     * Adds a class `_submit-attempted` to a form when it's attempted to be
     * submitted.
     *
     * This allows us to style invalid form fields differently for forms that
     * have and haven't been attemted to submit.
     */
    function addFormSubmitAttemptedTriggers() {

        var formEls = document.querySelectorAll('form');

        for (var i = 0; i < formEls.length; i++) {

            function addSubmitAttemptedTrigger(formEl) {

                var submitButtonEl = formEl.querySelector('input[type=submit]');

                if (submitButtonEl) {
                    submitButtonEl.addEventListener('click', function() {
                        formEl.classList.add('_submit-attempted');
                    });
                }

            }

            addSubmitAttemptedTrigger(formEls[i]);

        }

    }

    addFormSubmitAttemptedTriggers();

});

---

我在我的一个项目中使用了这种方法，因此只有在提交后才会突出显示无效字段：

HTML:

JS（jQuery）：

$（'[type=“submit”]'）。在（'click'，函数（）{
//这会将“必需”类添加到与提交按钮相同的所有必需输入中
$（本）
.最近（'形式'）
.find（“[必需]”）
.addClass（“必需”）；
});

非常简单，只需使用#ID:invalid:focus

---

这仅在关注页面加载而非页面加载时进行验证

您可以通过链接伪类来实现这一点：

<style>
  input:required:focus:invalid {
    ...
   }
</style>

输入：必需：焦点：无效{
...
}

这样，只有当输入字段需要并聚焦时，输入字段才会显示无效样式

以下是一篇有用的文章：

---

另一个堆栈溢出线程：

除了@Alexander Farkas'的帖子，Dave Rupert在这里有一个非常可行的解决方案：

本质上，它所做的是向表单输入元素添加一个CSS类，该元素仅在用户尝试提交表单后显示。这是更好的用户体验，因为默认情况下，这些元素不会显示无效的样式，或者当用户通过它们进行选项卡时，也不会显示无效的样式，从而增强了可访问性

---

在找到这一点之前，我尝试使用

：invalid:focus

和其他伪元素设置元素的样式，但没有达到预期效果。尽管我尽可能多地使用纯CSS进行样式设计，但这看起来像是一个用例，高效的JS是一个实用的解决方案。

我在我的网站上尝试过这一点：

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

---

哦，好吧，如果没有什么可以做的，我也可以做JS-validation:P，但那太糟糕了：P@alexanderfarkas用户在字段中输入信息后，标记仍保留。如何删除类名，比如onBlur？对于不支持JavaScript的用户，使用

：invalid

伪类，对于支持JS的用户，使用真实类覆盖它。这不会在提交时为用户突出显示任何忽略的字段或复选框，虽然。@retrovertigo不确定您使用的是什么浏览器，但在最新的firefox上，如果需要，复选框会被选中，用户单击了提交。啊，就像这样。。。一定是误解了什么。不过，这不会突出显示用户在提交时忽略的字段或复选框。

input.required:invalid {
    color: red;
}

$('[type="submit"]').on('click', function () {
    // this adds 'required' class to all the required inputs under the same <form> as the submit button
    $(this)
        .closest('form')
        .find('[required]')
        .addClass('required');
});

<style>
  input:required:focus:invalid {
    ...
   }
</style>

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

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