帮看下哪里有问题

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

不会飞的萌物

2019-01-24 15:47:34

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

<script type="text/javascript">

function replaceInvalidityUi(form){

form.addEventListener("invalid",function(event){
event.preventDefault();
},true)

form.addEventListener("submit",function(event){
if(!this.checkValidity()){
event.preventDefault();
}
},true)

var submitBtn=document.getElementById("thesubmit");
submitBtn.addEventListener("click",function(event){

var inValidityField = form.querySelectorAll(":invalid"),
errorMessage = form.querySelectorAll(".error-message"),
parent1;

console.log(inValidityField);

for(var j=0;j<errorMessage.length;j++){
                 errorMessage[j].parentNote.removeChild(errorMessage[j]);
                }
                
                for(var i=0;i<inValidityField.length;i++){
                 parent1 = inValidityField[i].parentNote;
                 parent1.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>

我检查大概是获取不到 var inValidityField = form.querySelectorAll(":invalid") ，但也没错啊，看不懂了

写回答

2回答