我的代码点提交时为什么一直会不断出现错误信息
来源：4-15 编程练习
田马达加斯加
2018-08-28 17:28:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.oneline {
line-height: 1.5;
margin: 10px auto;
}
.oneline label {
width: 100px;
text-indent: 15px;
font-size: 14px;
font-family: "Microsoft Yahei";
display: inline-block;
}
.oneline .sinput {
width: 60%;
height: 30px;
border-radius: 6px;
border: 1px solid #e2e2e2;
}
.oneline input[type="submit"] {
margin-left: 20px;
width: 80px;
height: 30px;
border: 0;
background-color: #5899d0;
color: #fff;
font-size: 14px;
border-radius: 6px;
}
.error-messages {
color: red;
}
</style>
</head>
<body>
<form id="forms">
<div class="oneline">
<label for="name">用户名:</label>
<input id="name" class="sinput" name="name" type="text" required>
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" class="sinput" name="email" type="email" required>
</div>
<div class="oneline">
<input type="submit" id="submits" value="提交">
</div>
</form>
<script>
//封装一个函数进行气泡样式的修改
function replaceValidationUI(form){
//对form的invalid时间进行监听
form.addEventListener('invalid',function(event){
//阻止默认气泡
event.preventDefault();
},true)//默认情况下此处为false，改为true，则阻止默认事件。
//对form的submit时间进行监听
form.addEventListener('submit',function(event){
//当验证不通过时，进行阻止
if(!this.checkValidity){
event.preventDefault();
}
},true)
var submitBtn=document.getElementById('submits');
//对submitBtn点击事件进行一个监听
submitBtn.addEventListener('click',function(event){
//获取到所有不符合验证信息的
var inValidityFiled=form.querySelectorAll(':invalid'),
//获取到所有的错误信息，以便清除之前的错误信息
errorMessage=form.querySelectorAll('.error-message');
//parent;//定义变量parent，插入时，是基于变量parent来插入的。
//首先对错误信息进行一个循环，点击提交按钮后，把之前的错误信息给删除掉
for(var i=0;i<errorMessage.length;i++){
//
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}
//添加新的错误信息
for(var i=0;i<inValidityFiled.length;i++){
//获取form的label信息
label=form.querySelector('label[for='+inValidityFiled[inValidityFiled.length-i-1].id+']');
//parent=inValidityFiled.parentNode;//inValidityFiled的父级元素
//向父级元素的后面添加一个错误信息
form.insertAdjacentHTML("beforebegin","<div class='error-messages'>"+label.innerText+
inValidityFiled[i].validationMessage+"</div>");
}
//
if(inValidityFiled.length>0){
inValidityFiled[0].focus();
}
})
}
var form=document.getElementById('forms');
replaceValidationUI(form);
</script>
</body>
</html>
1回答
-
有两个错误的地方：
1、插入错误信息的时候是有s后缀的，但是获取的时候没有
2、你使用的是beforebegin这个方法，现在错误信息插入在了form外面，如下：
想通过form是获取不到错误信息的，所以也移除不了。可以改成afterbegin方法。
自己测试下，祝学习愉快~~
0
相似问题