HTML5 Validation check test

This commit is contained in:
KNKIM 2021-07-14 16:44:46 +09:00
parent 64c01e079d
commit 889fa05a36

View File

@ -57,10 +57,12 @@ input:valid {
<form> <form>
<label for="choose">Would you prefer a banana or cherry?</label><br/> <label for="choose">Would you prefer a banana or cherry?</label><br/>
<input id="choose1" name="i_like1" ><br/> <input id="choose1" name="i_like1" oninvalid="InvalidMsg1(this, '잘 입력해요.1');"><br/>
<input id="choose2" name="i_like2" required><br/> <input id="choose2" name="i_like2" required oninvalid="InvalidMsg2(this, '잘 입력해요.2');"><br/>
<input id="choose3" name="i_like3"><br/> <input id="choose3" name="i_like3"><br/>
<input id="email" name="email" required pattern="[Bb]anana"> * Banana or banana<br/> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">
email : <input type="email" id="email" name="email"><br/>
<input id="sssss" name="sssss" required pattern="[Bb]anana"> * Banana or banana<br/>
<div> <div>
<label for="number">How many would you like?</label> <label for="number">How many would you like?</label>
==> <input type="number" id="number" name="amount" value="" min="1" max="10" required oninvalid="InvalidMsg(this, '잘 입력해요.');"> ==> <input type="number" id="number" name="amount" value="" min="1" max="10" required oninvalid="InvalidMsg(this, '잘 입력해요.');">
@ -75,7 +77,7 @@ input:valid {
</form> </form>
<script> <script>
function InvalidMsg(textbox, msg) { function InvalidMsg1(textbox, msg) {
alert("invalid"); alert("invalid");
if (textbox.value === '') { if (textbox.value === '') {
textbox.setCustomValidity textbox.setCustomValidity
@ -89,6 +91,34 @@ function InvalidMsg(textbox, msg) {
return true; return true;
} }
function InvalidMsg2(textbox, msg) {
alert("invalid");
if (textbox.value === '') {
textbox.setCustomValidity
(msg);
} else if (textbox.validity.typeMismatch) {
textbox.setCustomValidity
('Please enter an email address which is valid!');
} else {
textbox.setCustomValidity('');
}
return true;
}
function InvalidMsg(textbox, msg) {
alert("invalid");
if (textbox.value === '') {
textbox.setCustomValidity
(msg);
} else if (textbox.validity.typeMismatch) {
textbox.setCustomValidity
('Please enter an email address which is valid!');
} else {
textbox.setCustomValidity('');
}
return true;
}
</script> </script>