<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("form").submit(function(){
//エラーの初期化
$("p.error").remove();
//テキストフィールド、テキストエリア必須
$(":text,textarea").filter(".validate").each(function(){
//必須項目
$(this).filter(".required").each(function(){
if($(this).val() == ""){
$(this).parent().prepend("<p class='error'>必須項目です</p>");
}
});
});
//テキストフィールド10文字以内
$(":text").filter(".validate").each(function(){
//必須項目
$(this).filter(".limit").each(function(){
if($(this).val().length > 10){
$(this).parent().prepend("<p class='error'>10文字以内で入力してください</p>");
}
});
});
//テキストエリア100文字以内
$("textarea").filter(".validate").each(function(){
//必須項目
$(this).filter(".limit").each(function(){
if($(this).val().length > 100){
$(this).parent().prepend("<p class='error'>100文字以内で入力してください</p>");
}
});
});
//ラジオボタン必須
$(":radio").filter(".validate").each(function(){
$(this).filter(".required").each(function(){
if($(":radio[name="+$(this).attr("name")+"]:checked").size() == 0){
$(this).parent().prepend("<p class='error'>選択してください</p>");
}
});
});
//セレクトボックス必須
$("option:selected").parent().filter(".validate").each(function(){
//必須項目
$(this).filter(".required").each(function(){
if($(this).val() == ""){
$(this).parent().prepend("<p class='error'>必須項目です</p>");
}
});
});
//チェックボックス必須
$(":checkbox").parent().each(function(){
if($(":checkbox:checked",this).size() == 0){
$(this).prepend("<p class='error'>１個以上選択してください</p>");
}
});
if($("p.error").size() > 0){
return false;
}
});
});
</script>
<style type="text/css">
em{
color:#FF0000;
margin:0 5px;
}
dt{
margin:5px 0;
}
p.error{
color:#FF0000;
font-size:14px;
font-weight:bold;
margin:5px 0;
}
</style>
<body>
<form action="http://www.yahoo.co.jp/" method="POST">
<dl>
<dt>お名前<em>10文字以内</em></dt>
<dd><input type="text" name="name" class="validate required limit"></dd>
<dt>性別<em>必須</em></dt>
<dd>
<input type="radio" name="gender" value="男性" class="validate required">
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性">
<label for="gender_woman">女性</label>
</dd>
<dt>年齢<em>必須</em></dt>
<dd>
<select name="age" class="validate required">
<option value="">選択してください</option>
<option value="10代">10代</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
<option value="40代以上">40代以上</option>
</select>
</dd>
<dt>スキル<em>1つ以上</em></dt>
<dd>
<input type="checkbox" name="html" value="HTML" class="validate">
<label for="html">HTML</label>
<input type="checkbox" name="css" value="CSS" class="validate">
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" class="validate">
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" class="validate">
<label for="php">PHP</label>
</dd>
<dt>コメント<em>100文字以内</em></dt>
<dd>
<textarea name="comment" class="validate required limit"></textarea>
</dd>
<input type="submit" value="送信">
</dl>
</form>
</body>
</html>