为什么email没有填写就提交了但是没有气泡出来呢

来源：4-13 html5默认气泡修改演示

hyperse

2019-09-06 22:24:18

这是表单什么都没填时点击的效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>html5默认气泡修改演示</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: #FFFFFF;
font-size: 14px;
border-radius: 6px;
}
.error-message{
color: red;
font-size: 12px;
text-indent: 108px;
}
    </style>
</head>
<body>
<form id="forms">
<div class="oneline">
<label for="name">用户名：</label>
<input id="name" name="name" class="sinput" required="required" />
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" name="email" class="sinput" type="email" />
</div>
<div class="oneline">
<input type="submit" value="提交" id="thesubmit" />
</div>
</form>
</body>

<script>
function replaceInvalidityUi(form){  //阻止默认气泡
form.addEventListener('invalid',function(event){
event.preventDefault();
},true)
form.addEventListener('submit',function(event){
if(!this.checkValidity()){
event.preventDefault();
}
})
var submitBtn = document.getElementById('thesubmit');
submitBtn.addEventListener('click',function(event){
var inValidityField = form.querySelectorAll(':invalid'), //获取所有不符合验证的信息
errorMessage = form.querySelectorAll('.error-message'), //获取所有的错误信息
parent;
for(var i=0;i<errorMessage.length;i++){  //对错误信息循环并且删掉
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}

for(var i=0;i<inValidityField.length;i++){  //添加新的错误信息
parent = inValidityField[i].parentNode;
parent.insertAdjacentHTML("beforeend","<div class='error-message'>"+ inValidityField[i].validationMessage +"</div>");  //获取错误信息  
}
if(inValidityField.length>0){
inValidityField[0].focus();
}
})
}

var form = document.getElementById('forms');
replaceInvalidityUi(form);
</script>
</html>

而且这里没看明白：

for(var i=0;i<errorMessage.length;i++){ //对错误信息循环并且删掉

errorMessage[i].parentNode.removeChild(errorMessage[i]);

}

如果是在下面几行用insertHTML动态将错误信息加进来的，那前面还没有错误信息，又是如何操作错误信息的呢？代码难道不是按顺序执行咩？

var inValidityField = form.querySelectorAll(':invalid'), //获取所有不符合验证的信息
				errorMessage = form.querySelectorAll('.error-message'), //获取所有的错误信息
				parent;
			for(var i=0;i<errorMessage.length;i++){  //对错误信息循环并且删掉
				errorMessage[i].parentNode.removeChild(errorMessage[i]);
			}
			
			for(var i=0;i<inValidityField.length;i++){  //添加新的错误信息
				parent = inValidityField[i].parentNode;
				parent.insertAdjacentHTML("beforeend","<div class='error-message'>"+ inValidityField[i].validationMessage +"</div>");  //获取错误信息  
			}

老师如果再能把这两个for循环仔细讲讲就好了，谢谢

写回答

1回答