お問い合わせフォーム等のフォームについて、ユーザーが入力した内容を JavaScript でチェックしてから送信したい場合があります。チェックを行った結果、エラーが見つかりフォームの送信を中断したい場合の記述方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <meta charset="UTF-8" /> <script type="text/javascript"> function validate(){ if(document.hoge.name.value == ''){ alert('入力されていません。'); return false; } return true; } </script> </head> <body> <form method="post" action="send.php" name="hoge" onsubmit="return validate();"> <input type="text" name="name" /><input type="submit" value="送信" /> </form> </body> </html> |
5行目
送信ボタンが押されたときに実行する関数を記述します。送信を中断する場合は false を返却するようにします。ここでは name という名前を付けられたテキストエリアが空欄であった場合、alert を表示して false を返却しています。
15行目
form タグの onsubmit 属性に、先ほど定義した関数の結果を返却するように JavaScript を記述します。return が無いと validate 関数が false であっても送信が中断されません。