検証を可能にする連絡フォームを作成しようとする前に、この質問をしました（入力されていないか、間違って入力された場合にエラーが表示されます） - https://stackoverflow.com/questions/16331369/creating-a-contact-form-which -未記入時のエラー表示
終了関数は機能する必要はありません (つまり、送信する必要はありませんが、これが 100% 機能するのは良いことです)。これは、このテンプレートを作成しているためですが、検証とメッセージが来るようにしたいからです。間違って入力された場合はアップします。見て、私が間違っていたことを確認してください。事前に感謝します。
私のHTMLコード:
<div class="hr dotted clearfix"> </div>
<!-- Contact Form -->
<form action='index.html' method='post' id='contact_form'>
<h3>Contact Form</h3>
<div class="hr dotted clearfix"> </div>
<ul>
<li class="clearfix">
<label for="name">Name</label>
<input type='text' name='name' id='name' />
<div class="clear"></div>
<p id='name_error' class='error'>Insert a Name</p>
</li>
<li class="clearfix">
<label for="email">Email Address</label>
<input type='text' name='email' id='email' />
<div class="clear"></div>
<p id='email_error' class='error'>Enter a valid email address</p>
</li>
<li class="clearfix">
<label for="subject">Subject</label>
<input type='text' name='subject' id='subject' />
<div class="clear"></div>
<p id='subject_error' class='error'>Enter a message subject</p>
</li>
<li class="clearfix">
<label for="message">Message</label>
<textarea name='message' id='message' rows="30" cols="30"></textarea>
<div class="clear"></div>
<p id='message_error' class='error'>Enter a message</p>
</li>
<li class="clearfix">
<p id='mail_success' class='success'>Thank you. I'll get back to you as soon as possible.</p>
<p id='mail_fail' class='error'>Sorry, an error has occured. Please try again later.</p>
<div id="button">
<input type='submit' id='send_message' class="button" value='Submit' />
</div>
</li>
</ul>
</form>
</div>
そして、ここにJavaScriptの私のコードがあります:
$(document).ready(function(){
$('#send_message').click(function(e){
e.preventDefault();
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(subject.length == 0){
var error = true;
$('#subject_error').fadeIn(500);
}else{
$('#subject_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
}else{
$('#message_error').fadeOut(500);
}
if(error == false){
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
$.post("send_email.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#button').remove();
$('#mail_success').fadeIn(500);
}else{
$('#mail_fail').fadeIn(500);
$('#send_message').removeAttr('disabled').attr('value', 'Submit');
}
});
}
});
});
CSS の一部:
p.error {margin-left:140px; margin-top:10px;}
#contact_form ul {float:left;}
#contact_form ul li {margin:10px 0; list-style:none; position:relative; clear:both;}
#contact_form label {line-height:35px; width:100px; text-align:right; float:left; margin-right:10px;}
#contact_form input#name,
#contact_form input#email,
#contact_form input#subject,
#contact_form textarea {float:left; padding:8px; border:1px solid #CCCCCC; margin-left:10px; background:#fcfcfc; -moz-border-radius:5px; -webkit-border-radius:5px;}
#contact_form input#name,
#contact_form input#email,
#contact_form input#subject {width:400px;}
#contact_form textarea {width:500px;height:150px; resize: none;}
#contact_form input.button {float:right;}