dialog avec form (sans doute bug "Opera developer")

Le samedi 25 octobre 2014 à 06:58, Une Bévue a écrit :

Le 25/10/14 02:07, SAM a écrit :

Pas essayé ce truc mais ici on me dit que c'est supporté par Opera
depuis la version 24 ...

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Browser_compatibility>



La version française de cette page dit qu'il n'y a que Chrome qui s'en
dépatouille.

En tous cas chez moi c'est bien le cas :-/
(pour Safari, j'en suis resté à la Version 5.1.10)
(Opera Version 12.16)

oui, oui, je sais, j'ai testé sur Safari, ça ne marche pas. mais bon je
m'en fou, c'est une page pour moi.

J'ai testé l'exemple du MDN et ça "fonctionne" à priori pareil sur Opera
26.0.1656.5 et Chromium Version 39.0.2147.0 mais je ne suis pas
spécialiste.
À noter que je vois pas, dans ce code, la présence de <dialog /> dont tu
parles sur f.c.i.w.n, mais ça n'a surement rien à voir ;)

@+
--
rm

Le 25/10/14 13:34, rm a écrit :

J'ai testé l'exemple du MDN et ça "fonctionne" à priori pareil sur Opera
26.0.1656.5 et Chromium Version 39.0.2147.0 mais je ne suis pas
spécialiste.
À noter que je vois pas, dans ce code, la présence de <dialog /> dont tu
parles sur f.c.i.w.n, mais ça n'a surement rien à voir;)

La partie dialog de mon code html :
<dialog id="dialog">
<form class='dialog_form' method="dialog">
<ul>
<li>
<h2>Entrez une nouvelle personne :</h2>
<span class="required_notification"> Entrée requise</span>
</li>
<li>
<label for="firstname">Prénom : </label>
<input class='dialog_input' type='text' id='firstname'
name='firstname' placeholder="Entrez le prénom" required />
</li>
<li>
<label for="lastname">Nom : </label>
<input class='dialog_input' type='text' id='lastname'
name='lastname' placeholder="Entrez le nom" required />
</li>
<li>
<label for="email">Email :</label>
<input class='dialog_input' type='email' id='email'
name='email' placeholder="Entrez l'email"/>
</li>
</ul>
<p id="dialog_p_buttons"><button id="button_save_confirm"
class="submit" type="submit" value="yes">OK</button><button
id="button_save_cancel" class="submit" type="submit" value="no"
autofocus>Annuler</button></p>
</form>
</dialog>



la partie JS :
function dialogPersonsAddConfirm(e) {
if (e.target.returnValue == 'yes') {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "'");
var firstname_elt = document.getElementById('firstname');
var firstname = firstname_elt.value;
console.log("dialogPersonsAddConfirm(e) -> firstname = '" +
firstname + "'");
var lastname_elt = document.getElementById('lastname');
var lastname = lastname_elt.value;
console.log("dialogPersonsAddConfirm(e) -> lastname = '" + lastname
+ "'");
var email_elt = document.getElementById('email');
var email = email_elt.value;
console.log("dialogPersonsAddConfirm(e) -> email = '" + email + "'");
var person = Object.create(null);
person.firstname = firstname;
person.lastname = lastname;
person.email = email;
websocket_queue_dispatcher.addQuery({database: 'photos',
collection: 'persons', mode: 'insert', person: person, sort: {lastname:
'asc', firstname: 'asc'}}, insertPerson);
} else {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "' => nothing to do");
}
}

bon, le nom long 'websocket_queue_dispatcher' n'importe pas dans le
'test-case' que je prépare, car mon JS n'a rien à voir avec ce qu'il se
produit :
si je clique sur le bouton 'button_save_cancel' il y a quand-même
validation des différents champs de la form alors que; comme c'est annulé...

Le 25/10/14 13:22, rm a écrit :

Opera 26 à jour (26.0.1656.5) utilise le moteur de Chrome en version
39.0.2171.27. Donc ça serait peut-être une régression du moteur de rendu,
ou alors une particularité vicieuse d'Opera à ce niveau ?

OUI, ok, mais je ne pense pas du tout que le problème soit du côté
"moteur de rendu". ça doit-être plutôt un ch'ti bout de code JS embarqué
dans le butineur qui a pour fonction de valider les données de la form
en fonction de leur type.

Le 25/10/14 13:34, rm a écrit :

À noter que je vois pas, dans ce code, la présence de <dialog /> dont tu
parles sur f.c.i.w.n, mais ça n'a surement rien à voir;)

Mon 'test-case' réduit au min:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>dialog test-case</title>
<script>
window.addEventListener('load', start, false);
var dialog_elt;
function start(e) {
console.log("start(e)");
dialog_elt = document.getElementById('dialog');
}
function showModalDialog() {
console.log("showModalDialog()");
dialog_elt.showModal();
dialog_elt.addEventListener('close', dialogPersonsAddConfirm, false);
}
function dialogPersonsAddConfirm(e) {
if (e.target.returnValue == 'yes') {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "'");
} else {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "'");
}
}
</script>
</head>
<body>
<button onclick='showModalDialog();'>Show modial dialog</button>
<dialog id="dialog">
<form method="dialog">
<ul>
<li>
<label for="firstname">Firstname : </label>
<input type='text' id='firstname' name='firstname'
placeholder="Enter first name" required />
</li>
<li>
<label for="lastname">Lastname : </label>
<input type='text' id='lastname' name='lastname'
placeholder="Enter last name" required />
</li>
<li>
<label for="email">Email :</label>
<input type='email' id='email' name='email'
placeholder="Enter email"/>
</li>
</ul>
<p><button type="submit" value="no"
autofocus>Cancel</button><button type="submit" value="yes">OK</button></p>
</form>
</dialog>
</body>
</html>

Donc, le bug existe sur :
Opera developer 26.0
Opera beta 25.0 (ie Opera Next)
Opera 25.0

Le dimanche 26 octobre 2014 à 09:31, Une Bévue a écrit :

Le 25/10/14 13:34, rm a écrit :

À noter que je vois pas, dans ce code, la présence de <dialog /> dont tu
parles sur f.c.i.w.n, mais ça n'a surement rien à voir;)

Mon 'test-case' réduit au min:

Merci :)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>dialog test-case</title>
<script>
window.addEventListener('load', start, false);
var dialog_elt;
function start(e) {
console.log("start(e)");
dialog_elt = document.getElementById('dialog');
}
function showModalDialog() {
console.log("showModalDialog()");
dialog_elt.showModal();
dialog_elt.addEventListener('close', dialogPersonsAddConfirm, false);
}
function dialogPersonsAddConfirm(e) {
if (e.target.returnValue == 'yes') {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "'");
} else {
console.log("dialogPersonsAddConfirm(e) -> returnValue = '" +
e.target.returnValue + "'");
}
}
</script>
</head>
<body>
<button onclick='showModalDialog();'>Show modial dialog</button>
<dialog id="dialog">
<form method="dialog">
<ul>
<li>
<label for="firstname">Firstname : </label>
<input type='text' id='firstname' name='firstname'
placeholder="Enter first name" required />
</li>
<li>
<label for="lastname">Lastname : </label>
<input type='text' id='lastname' name='lastname'
placeholder="Enter last name" required />
</li>
<li>
<label for="email">Email :</label>
<input type='email' id='email' name='email'
placeholder="Enter email"/>
</li>
</ul>
<p><button type="submit" value="no"
autofocus>Cancel</button><button type="submit" value="yes">OK</button></p>
</form>
</dialog>
</body>
</html>

Donc, le bug existe sur :
Opera developer 26.0
Opera beta 25.0 (ie Opera Next)
Opera 25.0

Même comportement avec Chromium Version 40.0.2200.0, ça ressemble pas à un
bug lié uniquement à Opera :)
À noter que, sur Chrome40 et Opera26, la touche "Escape" permet de fermer
le dialogue qui refuse de se fermer avec le bouton "Cancel". Et qu'Opera
12.17 et Firefox36, sans afficher de dialogue modal, signalent aussi que le
champs est requis lors d'un "Cancel"

@+
--
rm

Le dimanche 26 octobre 2014 à 09:08, Une Bévue a écrit :

Le 25/10/14 13:22, rm a écrit :

Opera 26 à jour (26.0.1656.5) utilise le moteur de Chrome en version
39.0.2171.27. Donc ça serait peut-être une régression du moteur de rendu,
ou alors une particularité vicieuse d'Opera à ce niveau ?

OUI, ok, mais je ne pense pas du tout que le problème soit du côté
"moteur de rendu". ça doit-être plutôt un ch'ti bout de code JS embarqué
dans le butineur qui a pour fonction de valider les données de la form
en fonction de leur type.

Je ne suis pas spécialiste mais en ajoutant "formnovalidate" dans ton
<button type="submit" value="no" autofocus> ça résoud le problème dans
Crome et Opera.
J'ai trouvé l'argument, qui a un peu l'air "étudié pour" sur
http://dev.w3.org/html5/spec-preview/form-submission.html :)

@+
--
rm

Le 26/10/14 21:06, rm a écrit :

Même comportement avec Chromium Version 40.0.2200.0, ça ressemble pas à un
bug lié uniquement à Opera:)
À noter que, sur Chrome40 et Opera26, la touche "Escape" permet de fermer
le dialogue qui refuse de se fermer avec le bouton "Cancel". Et qu'Opera
12.17 et Firefox36, sans afficher de dialogue modal, signalent aussi que le
champs est requis lors d'un "Cancel"

OK, super merci pour ces infos, au moins il y a un "workaround" avec esc.

Au fait, j'ai cru un moment qu'enlever le submit au bouton cancel,
résolverait le problème, ben il n'en est rien...

Le 26/10/14 21:28, rm a écrit :

Je ne suis pas spécialiste mais en ajoutant "formnovalidate" dans ton
<button type="submit" value="no" autofocus> ça résoud le problème dans
Crome et Opera.
J'ai trouvé l'argument, qui a un peu l'air "étudié pour" sur
http://dev.w3.org/html5/spec-preview/form-submission.html :)

Ah super, merci bien, cette solution me va très très bien, effectivement
c'est du "conçu pour"...