CSS自动填充和验证

问题描述 投票：0回答：1

我正在设计一些用户输入的样式，但遇到了绊脚石。

我不反对使用自动完成功能的用户（我个人讨厌在某些站点上将其关闭的情况），因为我认为这非常方便。我知道如何用-webkit-autofill设置样式，但是自动填充将始终导致字段获得:valid状态，即使它们不应该如此。

例如，我将一个字段的长度至少设置为5个字符：

<input type="text" required class=namefileds id=first_name name=Name[] placeholder="Enter your first name" minlength="5">

我已经为有效/嵌入的情况设置了CSS样式：

#checkout_form input:invalid{
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
    #checkout_form input:valid{
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

而且这很好。为了使自动填充样式更好地工作（在所有Webkit浏览器上），我添加了以下CSS规则：

       @-webkit-keyframes autofillvalid {
    0%,100% {
        color: #ffcc00;
        background:none;
         padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
}
    @-webkit-keyframes autofillinvalid {
    0%,100% {
        background:none;
        padding-right: calc(1.5em + .75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center right calc(.375em + .1875rem);
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
}

    input:-webkit-autofill:valid {
        -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
        -webkit-animation-name: autofillvalid;
        -webkit-animation-fill-mode: both;
    }
    input:-webkit-autofill:invalid {
        -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
        -webkit-animation-name: autofillinvalid;
        -webkit-animation-fill-mode: both;
    }

[我的问题是，如果自动填充的名称只有4个字符，则应该获得:invalid状态，但是自动填充始终会生成:valid状态。其他状态选择器看起来可以正常工作，例如：:focus

我看了this问题，但是我现在暂时不想触发其他Java脚本，这全都与视觉有关，在用户与其他事物进行交互之后也会进行验证。这就是问题所在，如果自动填充给人以错误的感觉，即数据是有效的，那么在以后的阶段显示为无效可能会令人沮丧……

关于如何仅通过CSS设置样式的任何想法？

如果必须使用JS：另一个问题是，在不手动更改值之前，样式不会在字段上更新，因此触发字段上的jQuery .change()事件没有帮助

[写这个问题时，我决定做一些进一步的挖掘，更糟糕的是，自动填充使元素document.getElementById("first_name").checkValidity()在不应该返回的情况下返回true。

因此，当我从一个CSS问题开始时，现在我更倾向于问这是否可以视为错误？

编辑1：由于checkValidity()返回true，因此我尝试提交表单（由于不满足验证条件，因此通常不应该提交该表单），并且确实提交了该表单。当然，适用的黄金法则是永远不要信任用户数据，服务器端会拒绝它，但是我认为这不会发生，简单的自动填充不应自动意味着数据有效。

javascript html css google-chrome webkit
1个回答
1
投票

我希望能有所帮助：

使用“模式”属性代替“最小长度”。

#checkout_form input:invalid{
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
    #checkout_form input:valid{
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    
    @-webkit-keyframes autofillvalid {
    0%,100% {
        color: #ffcc00;
        background:none;
         padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
}
    @-webkit-keyframes autofillinvalid {
    0%,100% {
        background:none;
        padding-right: calc(1.5em + .75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center right calc(.375em + .1875rem);
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
}

    input:-webkit-autofill:valid {
        -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
        -webkit-animation-name: autofillvalid;
        -webkit-animation-fill-mode: both;
    }
    input:-webkit-autofill:invalid {
        -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
        -webkit-animation-name: autofillinvalid;
        -webkit-animation-fill-mode: both;
    }
<form id="checkout_form" >
  <input type="text" required class=namefileds id=first_name name=Name[] placeholder="Enter your first name" pattern=".{5,}">
  <button type="submit">submit</button>
</form>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.