formカスタムリスニングの検証
10387 ワード
コードは次のとおりです。
<html>
<head>
<style>
/*=== required ===*/
/* */
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)
}
// form tipback
tip(document.querySelector("form"),tipback)
script>
html>