<!doctype html>
<html>
<head>
<style>
/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */
.glow {
font-size: 16px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
color: black;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
<script type='text/javascript'>
var rep=(location.search.split('fa=')[1] ? 'Favourite anything: ' + decodeURIComponent(location.search.split('fa=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fn=')[1] ? 'Favourite integer: ' + decodeURIComponent(location.search.split('fn=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fc=')[1] ? 'Favourite colour: <font color=' + decodeURIComponent(location.search.split('fc=')[1].split('&')[0]) + '>' + decodeURIComponent(location.search.split('fc=')[1].split('&')[0]) + '</font><br>' : '');
rep+=(location.search.split('ff=')[1] ? 'Favourite file: ' + decodeURIComponent(location.search.split('ff=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fe=')[1] ? 'Favourite email: ' + decodeURIComponent(location.search.split('fe=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fu=')[1] ? 'Favourite url: ' + decodeURIComponent(location.search.split('fu=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fd=')[1] ? 'Favourite date: ' + decodeURIComponent(location.search.split('fd=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('ft=')[1] ? 'Favourite time: ' + decodeURIComponent(location.search.split('ft=')[1].split('&')[0]) + '<br>' : '');
rep+=(location.search.split('fm=')[1] ? 'Favourite month: ' + decodeURIComponent(location.search.split('fm=')[1].split('&')[0]) + '<br>' : '');
function dorep() {
document.getElementById('drep').innerHTML=rep;
}
function moredetail(fn) {
var retval='';
var ins=document.getElementsByTagName('input'), jins=0;
for (jins=0; jins<ins.length; jins++) { if (ins[jins].name == fn) { ins[jins].className='glow'; } }
switch (fn) {
case 'fa':
retval='"Favourite anything"';
break;
case 'fn':
retval='"Favourite integer"';
break;
case 'fc':
retval='"Favourite colour"';
break;
case 'ff':
retval='"Favourite file"';
break;
case 'fe':
retval='"Favourite email"';
break;
case 'fu':
retval='"Favourite url"';
break;
case 'fd':
retval='"Favourite date"';
break;
case 'ft':
retval='"Favourite time"';
break;
case 'fm':
retval='"Favourite month"';
break;
}
return retval;
}
setTimeout(dorep, 2000);
</script>
</head>
<body>
<div id=drep></div>
<h1>The oninvalid HTML form input element event</h1>
<h3>RJM Programming - July, 2019</h3>
<form action="./oninvalid.html" method="GET">
Favourite anything: <input placeholder="Mandatory field" name=fa type="text" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite integer: <input placeholder="Mandatory field" name=fn type="number" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" step=1 required></input><br><br>
Favourite colour: <input placeholder="Mandatory field" name=fc type="color" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite file: <input placeholder="Mandatory field" name=ff type="file" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite email: <input placeholder="Mandatory field" name=fe type="email" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite url: <input placeholder="Mandatory field" name=fu type="url" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite date: <input placeholder="Mandatory field" name=fd type="date" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite time: <input placeholder="Mandatory field" name=ft type="time" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite month: <input placeholder="Mandatory field" name=fm type="month" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
<input type="submit" value="Report" style='background-color:yellow;'>
</form>
<input style='position:absolute;top:-200px;left:-200px;type=text value=''></input>
</body>
</html>