jQueryの基本的なイベント処理の書き方ではjQueryを使ったクリックやマウスオーバーイベントの書き方を紹介しました。
ここではフォームイベントについてまとめていきます。
jQuery フォームイベント処理の書き方
フォームの送信ボタンを押すと通常はactionに設定されたリンクへ移動します。送信ボタンを押したときにイベントを発生させることで入力された値が正しいかどうかをチェックできます。
最近はHTML5のみでバリデーションできたり、便利なプラグインが様々な言語で公開されてるのでそちらを使うのが安全ですが、ここではフォームイベントの基本的な処理を知るためjavascriptで書いてみます。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Form</title>
</head>
<body>
<h1>jQuery Form</h1>
<form action="javascript:alert('クリア!');">
<input type="text">
<input type="submit">
</form>
<p class="valid"></p>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jQuery-form.js"></script>
</body>
</html>javascript
$(function(){
$('input:submit').on('click' , function(event){
if($('input:text').val().length !== 0){
$('.valid').text('成功！');
return;
}
$('.valid').text('テキストを入れてください。');
event.preventDefault();
});
});
ブラウザで表示するとこんな感じ。
フォームはテキスト入力と送信ボタンの単純なもの。javascriptのほうではクリックイベントを作成し、フォームのvalueが空でなければactionを実行します。
その際returnをおいてjavascriptから抜ける処理を行います。また、値が空の場合はエラーメッセージを表示し、action先への移行を無効化します。
フォームバリデーションプラグインを使ってみる
手書きでも十分対応できますが、ここはプラグイン（ライブラリ？）を使うのが手っ取り早くて安全でしょう。
ここではgithubで人気のParsley.jsを使ってみます。このParsley非常に簡単にバリデーション機能を実装してくれるのでおすすめです。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parsley Test</title>
</head>
<body>
<h1>jQuery Form</h1>
<form id="form" data-parsley-validate>
<label for="name1">お名前</label>
<input type="text" name="name1" required>
<label for="mail1">メール</label>
<input type="email" name="mail1" data-parsley-trigger="change" required>
<input type="submit">
</form>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/parsley.min.js"></script>
<script src="js/ja.js"></script>
</body>
</html>
Persley.jsのトップページに書いてある通りインストールしてみました。大事なのはformにdata-parsley-validateを入れて、jsファイルを読み込むこと。日本語化もできるのでとくにいじらずこのまま使用できます。日本語化ファイルはParsleyファイルの後に読み込むようです。
実行してみるとこんな感じ。
本家にサンプルが用意されているのでそちらを参考にしながら
