<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src ="valid.js"></script>
<script type="text/javascript">
$(document).ready(function($){
$("#contact-form").validate({
rules: {
fullName: { //input name: fullName
required: true, //required boolean: true/false
minlength: 5,
},
email: { //input name: email
required: true, //required boolean: true/false
email: true //required boolean: true/false
},
subject: { //input name: subject
required: true, //required boolean: true/false
minlength: 5
},
message: { //input name: message
required: true,
minlength: 1
}
},
messages: { //messages to appear on error
fullName: {
required:"Please put your full name.",
minlength:"C'mon full name please."
},
email: "Enter a valid email.",
subject: {
required: "Whats the topic?",
minlength: ""
},
message: {
required: "What did you want to say?",
minlength: "Please complete your thoughts, then submit."
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url:"echo/html",
type:"POST",
success: function($){
$("#contact-form").delay(500).fadeOut("slow", function(){
$("#sent").fadeIn("slow");
});
return false;
}
});
}
});
})
</script>
<style type="text/css">
#contact{
padding: 20px;
width: 250px;
background: #FFF;
border: 1px solid #29216d;
position: static;
margin-top:50px;
position: fixed;
z-index: 200;
}
.txt-input,
.input{
color:#aaa;
margin: 3px 0;
font-family: Helvetica;
font-size: 11px;
}
.txt-input{
width: 250px;
}
.input{
width: 200px;
}
.txt-input:focus,
.input:focus{
color:#000;
}
label.error{
float: left;
font-size: 10px;
font-weight: bold;
color:#F0F;
}
.submit{
margin-top:20px;
display: block;
}
#sent{
display:none;
}
</style>
<div id="contact" class="corner-5">
<a class="handle" href="mailto%3Aelan%40trybuch.com">Content</a>
<form id="contact-form" method="post">
<input class="input required error" type="text" name="fullName" title="What shall I call you?"/>
<input class="input required error" type="text" name="email" title="foo@bar.com"/>
<input class="input required error" type="text" name="subject" title="Topic of conversation"/>
<textarea class="txt-input required error" name="message" rows="6"></textarea>
<input class="submit" type="submit" name="submit" value="submit"/>
</form>
<div id="sent">Sucess</div>
</div>
上記のコードを見てください。
すべてのバリデーターは正常に動作していますが、すべてのデータ フィールドに入力すると、成功メッセージが表示されません。
何が間違っているのかわかりません。
前もって感謝します。