これは、Firefox と Chrome では正しく機能し、検証される単純な HTML フォームですが、IE9 では機能しません。IE では、何も入力せずに送信ボタンを繰り返し押すと、検証メッセージが画面に繰り返し表示されます。
IEを互換モードに切り替えると、検証メッセージが出力されず、何も起こりません:(
HTMLコードは次のとおりです。
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#contactform").validate({
rules: {
firstname : "required",
surname : "required",
emessage : "required",
pcode1 : "required",
phone : "required",
cname : "required",
email: { // compound rule
required: true,
email: true
}
},
messages: {
firstname : " *Required",
surname : " *Required",
email : " *Required",
emessage : " *Required",
pcode1 : " *Required",
phone : " *Required",
cname : " *Required",
}
});
});
</script>
<title>Example</title>
</head>
<body>
<p>
<form id="contactform" method="post" action="email.php" class="form">
<table>
<tr>
<td>
Name*
</td>
<td>
<input type="text" name="firstname" id="firstname">
</td>
</tr>
<tr>
<td>
Surname*
</td>
<td>
<input type="text" name="surname" id="surname">
</td>
</tr>
<tr>
<td>
Company name*
</td>
<td>
<input type="text" name="cname" id="cname">
</td>
</tr>
<tr>
<td>
Email*
</td>
<td>
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td>
Telephone*
</td>
<td>
<input type="text" name="phone" id="phone">
</td>
</tr>
<tr>
<td>
Postcode*
</td>
<td>
<input type="text" name="pcode1" id="pcode1" size="" maxlength="8">
</td>
</tr>
<tr>
<td>
Message*
</td>
<td>
<textarea id="emassage" name="emessage" cols="67" rows="6"></textarea>
</td>
</tr>
<tr>
<td>
<button name="submit" id="submit" class="shiny-blue">Submit</button>
</td>
<td>
</td>
</tr>
</table>
</form>
</p>
</div>
</body>
</html>