第二个input没有气泡

首页课程实战体系课手记专栏慕课教程

第二个input没有气泡

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

hyperse

2019-09-07 20:29:06

视频里面是这样显示的，

我是照着视频里代码写的，但是气泡是这样的：

代码是照着视频敲的，所以想知道为什么不一样，以及该如何改呢？

<!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>

写回答

1回答