Edited at

JQuery formのバリデーション。入力しないとsubmit不可

More than 5 years have passed since last update.

logo-100-100.png半泣きで覚書 by Takayoshi.Iwasaki


jquery.form-validation-and-hintsのメモ

毎回使う。かなり便利。

しかも実装簡単。シンプル。

オマージュを込めてメモ。

varidetion.jpg


head内で読み込み

<script type="text/javascript" src="./jquery-1.5.2.min.js"></script>

<script type="text/javascript" src="./jquery.form-validation-and-hints.js"></script>

※jquery-1.8.2.min.jsでは動かない。

1.7.2は大丈夫でした。

●submitに必ず付けるモノ


submit

<input class="submit" type="submit" name="go" value="次へ" style="width:100%;"/>


class="submit" これを付けないと何も起こらない。

●CSS

以下をスタイルシートにそのまま追加するだけ。

一番下にでも入れてください。


エラーのスタイル

.error INPUT, .error TEXTAREA, .error SELECT { border-width:2px; border-style:solid; border-color:#ED1C24; background:#FFE6E7; }

.iferror { margin:0; display:none; }
.error .iferror { display:block;width:200px;background:red;color:#fff;padding:3px; }
.hint { color:#888; }


必須入力

(値があればなんでもOKな場合)


必須入力

<div class="field required">

<label class="name" for="name">お名前</label>
<input class="text verifyText" type="text" name="name" id="name" placeholder="大阪太郎" style="width:100%; height:100%" />
<span class="iferror">必須項目です</span>
</div>

div class="field required" これで囲む。これが必須入力の役割

input class="text verifyText"… これがテキストという指定

span class="iferror"  エラー時のメッセージ


半角数字のみ許可


半角数字

<div class="field required">

<label class="tel" for="tel" >お電話番号</label>
<input class="text verifyInteger" type="text" name="tel1" id="tel" placeholder="080" style="width:100%; height:100%" /><div class="hai">-</div>
<span class="iferror">半角数字のみ入力可能です</span>
</div>

input class="text verifyInteger" … 半角数字の意


メール形式のみ許可


メール型

<div class="field required">

<label class="mail" for="mail" >メールアドレス</label>
<input class="text verifyMail" type="text" name="mail" id="mail" placeholder="info@soldes-japan.com" style="width:100%; height:100%" />
<span class="iferror">メールアドレスを入力してください</span>
</div>

class="text verifyMail"… プレグマッチでアドレスのみ許可


ダウンロード:JQery.form-validation-and-hints

タイトルの下4行目に小さい字で【Download latest version】って書いてる。