Vue.js3環境でtable形式のformをsubmitしようとしたときにsubmitできない事象に遭遇しました。
初心者丸出しで恥ずかしい限りですが、備忘録として残しておきます。
原因と解決策
tableタグの直下にformを作成してしまった。
tableとformを組み合わせるときはformを外に置くのが文法的に正しい。
Vue.js無しだと動いてしまうが、Vue.jsありだと動かなかった。
Vue.jsありなしに関係なく文法的に正しいものを書く努力をしよう！！(←解決策)
検証した環境
| 項目 | version |
|---|---|
| Vue.js | 3.2.37 |
| chrom | 103.0.5060.66（Official Build）（64 ビット） |
検証したコード
submitされたかわかるように、patternでvalidationが効くようにしています。
また、Vue.jsの部分は全く意味のないチュートリアルのようなコードですが、悪しからず。
できない(vueありtable直下にform)
Vue.js環境でtable直下にformを設置した、私が書いたコードです。
更新ボタンを押しても何も反応がありません。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@3.2.37"></script> <title>Document</title> </head> <body> <div id="vm"> <table> <form action="" method="post" class="form"> <button type="submit">更新</button> <tr> <td><input type="text" pattern=".{2}" title="2文字"></td> </tr> </form> </table> </div> <script> const app = Vue.createApp({ data() { return { info: '', } }, }) const vm = app.mount('#vm'); </script> </body> </html>
できる(vue.js環境でformの中にtable設置)
formの中にtableを設置します。
このコードは更新を押すと正しくvalidationが効いているのでsubmitが効いています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@3.2.37"></script> <title>Document</title> </head> <body> <div id="vm"> <form action="" method="post" class="form"> <table> <button type="submit">更新</button> <tr> <td><input type="text" pattern=".{2}" title="2文字"></td> </tr> </table> </form> </div> <script> const app = Vue.createApp({ data() { return { info: '', } }, }) const vm = app.mount('#vm'); </script> </body> </html>
できる(Vue.js無しでtableの中にform設置)
tableの中にformを置いていますが、Vue.js部分をコメント化すると動きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- <script src="https://unpkg.com/vue@3.2.37"></script> --> <title>Document</title> </head> <body> <!-- <div id="vm"> --> <table> <form action="" method="post" class="form"> <button type="submit">更新</button> <tr> <td><input type="text" pattern=".{2}" title="2文字"></td> </tr> </form> </table> <!-- </div> --> <!-- <script> const app = Vue.createApp({ data() { return { info: '', } }, }) const vm = app.mount('#vm'); </script> --> </body> </html>
tableの中にformを入れるのはW3C的にNG
Web技術の権威、W3Cが直々にHTMLの文法間違いを検証してくれる下記ツールでもtableの中にformがあるのはNGとされています。
The W3C Markup Validation Service
実際にtableの中にformを置いたコードをチェックすると下記のようにエラーとなります。
でも実際は動いている・・・。
終わりに
初心者あるあるな感じですね。
大変お恥ずかしい話ですが残しておきます。
このように、htmlって文法的に間違っていても、ブラウザさんが頑張ってくれてなんとなく動いてくれるんですよね。
よしなに動かしてくれるブラウザさんの寛容さがwebのいいところなのかも・・・。
でもVue.jsさんは許してくれなかったと・・・。
厳しい現実に打ちのめされながら日々精進です。
ここまでお読み頂き、ありがとうございました。
