在HTML5中验证。 ：提交后无效的classe

时间：2011-09-27 22:01:29

标签： css forms html5 css3

我正在构建一个表单，如果用户在不填写提交的情况下按下提交，我想使用:invalid选择器为“必需”输入字段提供红色边框，但使用此选项会使它们在正确时突出显示页面加载。在给予他至少一次填充它们的机会之前，向用户发出这种警告似乎是不友好的。

是否有一种方法可以在尝试提交表单后突出显示这些字段，用另一种方式说，是否有办法在单击提交后运行验证（或者至少失去对所需输入字段的关注？）

9 个答案:

答案 0 :(得分：7)

我将此方法用于我的项目，因此只有在提交后才会突出显示无效字段：

HTML：

<form>
  <input type="email" required placeholder="Email Address">
  <input type="password" required placeholder="Password">
  <input type="submit" value="Sign in">
</form>

CSS：

input.required:invalid {
    color: red;
}

JS（jQuery）：

$('[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');
});

答案 1 :(得分：5)

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

这仅在关注时进行验证，而不是在页面加载时进行验证

答案 2 :(得分：4)

没有开箱即用。

Mozilla有一个类似于'-moz-ui-invalid'的非常类似的假类。如果你想实现这样的东西，你必须使用约束验证DOM-API：

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

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

答案 3 :(得分：2)

另一种方法是在加载JavaScript时向输入添加hide-hints类。当用户修改字段时，您将删除该类。

然后在CSS中将样式应用于input:not(.hide-hints):invalid。这意味着将为没有JavaScript的用户显示错误样式。

答案 4 :(得分：1)

旧问题，但是对于那些可能会觉得有用的人：我创建了一个小脚本，在尝试提交表单时为表单添加一个类，以便您可以设置已经尝试过但尚未尝试过的表单。提交方式不同：

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

});

现在尝试提交的表单将获得一个类_submit-attempted，因此您只能为这些字段指定一个红色框阴影：

input {
    box-shadow: none;
}

form._submit-attempted input {
    box-shadow: 0 0 5px #F00;
}

答案 5 :(得分：1)

除了@Alexander Farkas的帖子，Dave Rupert在这里还有一个非常可行的解决方案：Happier HTML5 Form Validation。

本质上，它的作用是添加CSS类以形成输入元素，该输入元素仅在用户尝试提交表单后才显示。这是更好的UX，因为这些元素默认情况下不会显示无效的样式，或者当用户通过它们进行制表时也不会显示无效的样式。

在找到此元素之前，我尝试使用:invalid:focus和其他伪元素对元素进行样式设置，但没有获得理想的效果。尽管我尝试尽可能地使用纯CSS进行样式设计，但这似乎是一个用例，其中高效的JS是切实可行的解决方案。

答案 6 :(得分：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()">

答案 7 :(得分：0)

要求＆＃39;验证

方式1 - 设置＆＃39;必需＆＃39;表单提交

上每个元素的属性 
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        function Registration() {
            $.ajax({
                url: "<?php echo base_url() . 'index.php/ravi/get_registration' ?>",
                type: 'POST', //the way you want to send data to your URL
                success: function (data) {
                    if (data) {
                        $("div#view").html(data);
                    }
                }
            });
        }

        function View() {
            $.ajax({
                url: "<?php echo base_url() . 'index.php/ravi/view' ?>",
                type: 'POST', //the way you want to send data to your URL
                success: function (data) {
                    if (data) {
                        $("div#view").html(data);
                    }
                }
            });
        }

        function Login() {
            $.ajax({
                url: "<?php echo base_url() . 'index.php/ravi/get_login' ?>",
                type: 'POST', //the way you want to send data to your URL
                success: function (data) {
                    if (data)  {
                        $("div#view").html(data);
                    }
                }
            });
        }

        function Logout() {
            $.ajax({
                url: "<?php echo base_url() . 'index.php/ravi/Logout' ?>",
                type: 'POST', //the way you want to send data to your URL
                success: function (data) {
                    if (data) {
                        $("div#view").html(data);
                    }
                }
            });
        }
    </script>
</head>
<body style="background-color: #99BC99">
    <div id="mydiv" align="center">
        <a href="javascript:ravi();"><b>Home</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:Registration();"><b>Registration</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:View();"><b>View Users</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:Login();"><b>Login</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:Logout();"><b>Logout</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div id="view">
        <?php
            if ($this->session->flashdata('ravi')) {
                echo $this->session->flashdata('ravi');
            }
            if ($this->session->flashdata('f1')) {
                echo $this->session->flashdata('f1');
            }
            if ($this->session->flashdata('f2')) {
                echo $this->session->flashdata('f2');
            }
            if ($this->session->flashdata('f3')) {
                echo $this->session->flashdata('f3');
            }
            if ($this->session->flashdata('f4')) {
                echo $this->session->flashdata('f4');
            }
        ?>
    </div>
</body>
</html>

方式2 - 使用＆＃39;数据＆＃39;属性

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

});

答案 8 :(得分：0)

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

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

这样，仅当该输入字段需要并集中显示时，输入字段才会显示无效的样式。

这是一篇很有帮助的文章：https://alistapart.com/article/forward-thinking-form-validation/

与此有关的另一个堆栈溢出线程：https://stackoverflow.com/a/7921385/11102617

相关问题
最新问题