既然气泡被阻止了，为什么还要删除错误的提示信息，直接添加新的提示信息不好么？

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

慕斯卡5217687

2018-04-16 01:45:58

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改默认气泡</title>
<style>
.item{

margin: 15px;
}
.item label{
display: inline-block;
width: 80px;
}
.item input{
width: 220px;
height: 30px;
line-height: 30p;
outline: 0;
border: 1px solid #666;
border-radius: 5px;
}
.item input[type="submit"]{
border: none;
margin-left: 40px;
}

.error-message{
color: red;
font-size: 16px;
text-indent: 120px;
}
</style>
</head>
<body>
<section>
<form id="forms" action="#" method="post" enctype="multipar/form-data">

<div class="item">
<label for="text">用户名</label>
<input type="text" id="text" required placeholder="请输入用户名">
</div>
<div class="item">
<label for="email">邮箱</label>
<input type="email" name="" id="email" required placeholder="请输入邮箱">
</div>
<div class="item">
<input type="submit" value="提交" id="getSubmit">
</div>
</form>
</section>
<script>
//封装一个函数
function replaceInvalidityUi(form){
//阻止默认的气泡
form.addEventListener("invalid",function(event){
//阻止默认气泡的方法
event.preventDefault();
},true)
//阻止提交默认气泡
form.addEventListener("submit",function(event){
if(!this.checkValidity()){
event.preventDefault();
}
},true)

//绑定 提交 summit 点击事件 触发更改气泡
var getSubmit=document.getElementById("getSubmit");
getSubmit.onclick=function(event){
//在点击时  获取到所有没有符合验证的input
var inValidityField=form.querySelectorAll(":invalid");

//获取到所有的错误提示信息
var errorMessage=form.querySelectorAll(".error-message");

var parent;
console.log(errorMessage);
//循环删除所有的错误提示信息
for(var i=0;i<errorMessage.length;i++){
// .parentNode 返回一个元素的父级节点
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}
//添加新的提示信息
for(var i=0;i<inValidityField.length;i++){
//获取到每一个错误input的父级元素
parent=inValidityField[i].parentNode;
//在每一父级元素的(bfroreend) 闭合标签之前 添加 新的提示信息
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>
</body>
</html>

写回答

1回答