reportValidity

This commit is contained in:
Adrien MALINGREY 2023-04-24 09:19:45 +02:00
parent de3e54b9cd
commit 7407fd1138
2 changed files with 8 additions and 9 deletions

9
app.js
View File

@ -376,11 +376,11 @@ Z.prototype.minoesPosition = [
class Settings { class Settings {
constructor() { constructor() {
for (let input of settingsForm.getElementsByTagName("input")) { this.form = settingsForm
for (let input of this.form.getElementsByTagName("input")) {
if (localStorage[input.name]) input.value = localStorage[input.name] if (localStorage[input.name]) input.value = localStorage[input.name]
} }
this.form.submit = newGame
settingsForm.onsubmit = newGame
this.modal = new bootstrap.Modal('#settingsModal') this.modal = new bootstrap.Modal('#settingsModal')
document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => { document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => {
resumeButton.focus() resumeButton.focus()
@ -621,7 +621,6 @@ function resume(event) {
event.preventDefault() event.preventDefault()
settings.load() settings.load()
document.onkeydown = onkeydown document.onkeydown = onkeydown
document.onkeyup = onkeyup document.onkeyup = onkeyup
@ -801,7 +800,7 @@ function gameOver() {
window.onbeforeunload = function(event) { window.onbeforeunload = function(event) {
localStorage["highScore"] = stats.highScore localStorage["highScore"] = stats.highScore
for (let input of settingsForm.getElementsByTagName("input")) { for (let input of settings.form.getElementsByTagName("input")) {
localStorage[input.name] = input.value localStorage[input.name] = input.value
} }
} }

View File

@ -22,7 +22,7 @@
<h1 id="titleHeader" class="modal-title w-100 text-center">QUATRIS</h1> <h1 id="titleHeader" class="modal-title w-100 text-center">QUATRIS</h1>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form name="settingsForm"> <form name="settingsForm" class="needs-validation" novalidate oninput="resumeButton.disabled = !settingsForm.checkValidity()">
<fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center"> <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Commandes</legend> <legend class="text-start">Commandes</legend>
<label for="moveLeftInput" title="Gauche" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"> <label for="moveLeftInput" title="Gauche" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
@ -79,13 +79,13 @@
<label for="arrInput" class="col-sm-2 col-form-label" title="Automatic Repeat Rate : période de répétition de l'action">ARR</label> <label for="arrInput" class="col-sm-2 col-form-label" title="Automatic Repeat Rate : période de répétition de l'action">ARR</label>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="input-group"> <div class="input-group">
<input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"> <input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1" required onInput="arrInput.reportValidity()">
<div class="input-group-text">ms</div> <div class="input-group-text">ms</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="input-group"> <div class="input-group">
<input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"> <input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5" required onInput="dasInput.reportValidity()">
<div class="input-group-text">ms</div> <div class="input-group-text">ms</div>
</div> </div>
</div> </div>
@ -95,7 +95,7 @@
<legend class="text-start">Partie</legend> <legend class="text-start">Partie</legend>
<label for="levelInput" class="col-sm-2 col-form-label text-center">Niveau</label> <label for="levelInput" class="col-sm-2 col-form-label text-center">Niveau</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15"> <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15" required onInput="startLevel.reportValidity()">
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<button id="resumeButton" type="submit" data-bs-dismiss="modal" class="btn btn-primary form-control" autofocus>Jouer</button> <button id="resumeButton" type="submit" data-bs-dismiss="modal" class="btn btn-primary form-control" autofocus>Jouer</button>