延迟HTML5:第一个事件之前的伪类无效怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (70)

我最近发现:invalid伪类适用于required页加载表单元素。例如,如果你有以下代码:

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

然后,你的页面将加载一个空的粉红色输入元素。内置到HTML 5中的验证是很棒的,但我认为大多数用户都不希望表单在有机会输入任何值之前就进行验证。是否有任何方法将伪类的应用推迟到影响该元素的第一个事件(表单提交、模糊、更改,任何适当的)?没有JavaScript就能做到这一点吗?

提问于
用户回答回答于

当使用HTML 5表单验证时,尝试使用浏览器来检测无效的提交/字段

invalid事件将“无效”类添加到窗体中。添加了“无效”类后,可以使用CSS 3对窗体进行样式设置。:pseudo选择器。

例如:

// where myformid is the ID of your form
var myForm = document.forms.myformid;

var checkCustomValidity = function(field, msg) {
    if('setCustomValidity' in field) {
        field.setCustomValidity(msg);
    } else {
        field.validationMessage = msg;
    }
};

var validateForm = function() {

    // here, we're testing the field with an ID of 'name'
    checkCustomValidity(myForm.name, '');

    if(myForm.name.value.length < 4) {
        checkCustomValidity(
            // alerts fields error message response
            myForm.name, 'Please enter a valid Full Name, here.'
        );
    }
};

/* here, we are handling your question above, by adding an invalid
   class to the form if it returns invalid.  Below, you'll notice
   our attached listener for a form state of invalid */
var styleInvalidForm = function() {
    myForm.className = myForm.className += ' invalid';
}

myForm.addEventListener('input', validateForm, false);
myForm.addEventListener('keyup', validateForm, false);
myForm.addEventListener('invalid', styleInvalidForm, true);

现在,只需根据我们附加的“无效”类对表单进行适当的样式设置。

例如:

form.invalid input:invalid,
form.invalid textarea:invalid {
    background: rgba(255, 0, 0, .05);
    border-color: #ff6d6d;
    -webkit-box-shadow: 0 0 6px rgba(255, 0, 0, .35);
    box-shadow: 0 0 6px rgba(255, 0, 0, .35);
}
用户回答回答于

你可以使用css检查占位符伪类。

input:not(:placeholder-shown):invalid {
    background-color: salmon;
}
<form>
    <input type="email" placeholder="me@example.com" required>
</form>

它从一个正常的背景开始,当你输入你不完整的电子邮件地址时,它会变成粉红色。

扫码关注云+社区

领取腾讯云代金券