代码如下
<!DOCTYPE html>
<html>
<head>
<style>
form :invalid
{
}
form :required:valid{
}
</style>
</head>
<body style="overflow: hidden;padding: 0px;border: 0px;margin: 0px;">
<form action="#" method="get">
<input id="a" name="a" required />
<input id="b" name="b" required />
<input id="c" name="c" required />
<input type="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
function tip(form,tipback) {
form.addEventListener("invalid", function(event) {
event.preventDefault();
}, true);
var submitButton = form.querySelector("button:not([type=button]), input[type=submit]")
submitButton.addEventListener("click", function(event) {
var invalidFields = form.querySelectorAll(":invalid")
if (invalidFields.length > 0) {
tipback()
invalidFields[0].focus()
}
})
}
function tipback(){
alert(1)
}
tip(document.querySelector("form"),tipback)
</script>
</html>