Sinatraを使ったメモアプリを作成中に新規投稿、投稿編集時にformタグ内のinputが未入力でPOST、PATCHで送信できないようにしたかったので調べてみました。
結論
required 属性を使うことでクライアント側(ブラウザ)でフォームが未入力時に警告を表示できる
- 必須入力にしたい要素に
required="required"(もしくはrequired)属性を追加する - あくまでクライアント側で空文字を防止するだけなのでセキュリティを万全にするにはサーバ側で空文字が送信された場合の処理は別途必要
例)formの値を/memos にPOSTで送信する(inputが未入力で警告を出す)
<form action="/memos" method="post"> <label>Title</label> <input name="title" type="text" required="required"> <label>Content</label> <textarea name="content"></textarea> <input type="submit" value="New Memo"> </form>
まとめ
とりあえずクライアント側で警告を出すことはできましたが、あくまで警告を出すだけなのでtelnet等を使えばで直接HTTPで空文字を送信できてしまいます。 サーバ側でバリデーション的な対策を行う必要があるので、次はその辺を学んでいきたい。セキュリティ周りはとても難しい。
