【緊急】リアルタイムでエラーチェック
下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。
このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>exValidationサンプル 2</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/exvalidation.js"></script>
<script type="text/javascript" src="js/exchecker-ja.js"></script>
<script type="text/javascript">
$(function(){
$("form")
.exValidation({
rules: {
name: "required",
kana: "required katakana",
email: "required email hankaku group",
pass: "required min6 max12",
repass: "required retype-pass",
radio: "radio",
checkbox: "checkbox"
},
errInsertPos: 'after',
errPosition: 'fixed'
});
});
</script>
</head>
<body>
<div class="pagebody">
<h1>exValidation</h1>
<form>
<fieldset>
<p class="attention">*は必須項目です</p>
<table>
<tbody>
<tr>
<th>Name<span>*</span></th>
<td><input type="text" id="name" name="name" value="" /></td>
</tr>
<tr>
<th>Kana<span>*</span></th>
<td><input type="text" id="kana" name="kana" value="" /></td>
</tr>
<tr>
<th>Mail<span>*</span></th>
<td><span id="email"><input type="text" id="email" name="email" value="" />
@
<input type="text" name="email2" value="" /></span></td>
</tr>
<tr>
<th>Password<span>*</span></th>
<td><input type="password" id="pass" name="pass" value="" /></td>
</tr>
<tr>
<th>Retype-Password<span>*</span></th>
<td><input type="password" id="repass" name="repass" value="" /></td>
</tr>
<tr>
<th>Sex<span>*</span></th>
<td>
<span id="radio">
<label for="male"><input type="radio" id="male" name="sex" value="male" />male</label>
<label for="female"><input type="radio" id="female" name="sex" value="female" />female</label>
</span>
</td>
</tr>
<tr>
<th>Prefecture<span>*</span><br />
this is selectable</th>
<td>
<select id="pref" name="pref" class="selectable">
<optgroup label="---">
<option value="">---</option>
</optgroup>
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
</optgroup>
</select>
</td>
</tr>
<tr>
<th>City</th>
<td><input type="text" name="city" value="" /></td>
</tr>
<tr>
<th>Street</th>
<td><input type="text" name="street" value="" /></td>
</tr>
<tr>
<th>Favorite<span>*</span></th>
<td>
<span id="checkbox">
<label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label>
<label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label>
<label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label>
<label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label>
<label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label>
</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
<p class="submit"><input type="submit" value="Submit" class="button" /></p>
</form>
</div>
</body>
</html>
お礼
ありがとうございます。 うまくいきました。