我正在构建一个表单,想要使用:invalid
选择器,如果用户在提交时没有填写"必填"的输入字段,则给这些字段添加红色边框,但是使用这个选择器会导致在页面加载时就已经出现突出显示。在让用户至少填写一次之前,给他们这种警告似乎不太友好。
有没有办法只在尝试提交表单后突出显示这些字段,换句话说,是否有一种方法只在单击提交按钮(或至少失去焦点在必填输入字段上)后才运行验证?
。
<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()">
针对“必填”验证
方法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>
.submitted input:invalid{
outline: 2px solid red; /* oranges! yey */
}
在之前的答案基础上进行扩展:不必向表单添加一个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>
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);
}
:invalid
伪类来为不支持JavaScript的用户提供样式,并为支持JS的用户覆盖它,使用真正的类。 - zzzzBov