重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

【緊急】リアルタイムでエラーチェック

解決済

  • 質問者：kokoko69
  • 質問日時：
  • 回答数：1件

下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。
このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

こんにちは





既に実験済みかもしれませんが、
input type="text" が空文字のままフォーカスが外れたらエラーにする方法はどうでしょうか？



サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exValidationサンプル 2</title>
</head>
<body onload="fc()">
<div class="pagebody">
<h1>exValidation</h1>
<form name="js" action="test.php" method="post">
<p class="attention">*は必須項目です</p>
<table>
<tbody>
<tr>
<th>Name<span>*</span></th>
<td><input type="text" id="name" name="name" value="" onblur="ot(1)"></td>
</tr>
<tr>
<th>Kana<span>*</span></th>
<td><input type="text" id="kana" name="kana" value="" onblur="ot(2)"></td>
</tr>
<tr>
</table>
<p class="submit"><input type="submit" value="Submit" class="button" /></p>
</form>
</div>
<script type="text/javascript">
function fc(){
document.js.name.focus();
}

function ot(n){
if(n==1){
var nam=document.js.name.value;
if(nam==""){
alert("ここは必須項目です。");
}
}else if(n==2){
var kan=document.js.kana.value;
if(kan==""){
alert("ここは必須項目です。");
}
}
}
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
回答者様の言うとおりに実行したところ解決しました！

通報する
お礼日時：2014/06/04 23:52

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報