<!doctype html>
<html>
<head>
<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;
}
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 field!');" value="" required></input><br><br>
Favourite integer: <input placeholder="Mandatory field" name=fn type="number" oninvalid="alert('You must fill out this 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 field!');" value="" required></input><br><br>
Favourite file: <input placeholder="Mandatory field" name=ff type="file" oninvalid="alert('You must fill out this field!');" value="" required></input><br><br>
Favourite email: <input placeholder="Mandatory field" name=fe type="email" oninvalid="alert('You must fill out this field!');" value="" required></input><br><br>
Favourite url: <input placeholder="Mandatory field" name=fu type="url" oninvalid="alert('You must fill out this field!');" value="" required></input><br><br>
Favourite date: <input placeholder="Mandatory field" name=fd type="date" oninvalid="alert('You must fill out this field!');" value="" required></input><br><br>
Favourite time: <input placeholder="Mandatory field" name=ft type="time" oninvalid="alert('You must fill out this field!');" value="" required></input><br><br>
Favourite month: <input placeholder="Mandatory field" name=fm type="month" oninvalid="alert('You must fill out this 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>