ページを更新せずに検証されるフォームをサイトに配置しようとしているため、ここから jquery validate を使用します ( http://jqueryvalidation.org/ )
ここに私のフォームがあります:
<form id="contact-form" method="post" action="" name="contact-form" >
<div class="row-fluid">
<div class="control-group span4">
<div class="controls">
<input type="text" class="input-xlarge" name="name" maxlength="80" placeholder="Name (required)" id="name" />
</div>
</div>
<div class="control-group span4">
<div class="controls">
<input type="text" name="email" maxlength="255" placeholder="Email Address (required)" />
</div>
</div>
<div class="control-group span4">
<div class="controls">
<input type="text" name="subject" placeholder="Subject" />
</div>
</div>
</div><!-- end row-fluid -->
<div class="control-group">
<div class="controls">
<textarea name="message" placeholder="Message (required)"></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact" />
<input type="submit" name="submit2" value="Send Message" />
</div>
</form>
これは私のJavaScriptです:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.validator.setDefaults({
errorClass : "help-inline"
});
$('#contact-form').validate({
rules: {
name: {minlength: 2, required: true },
email: {required: true, email: true },
subject: {minlength: 2, required: true },
message: {minlength: 2, required: true }
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#contact-form").serialize(), function(data) {
$("#contact-form").hide();
$('#results').html(data);
});
}
});
}); // end document.ready
</script>
これが process.php です。
<?php
// check for form submission - if it doesn't exist then send back to contact form
if (isset($_POST["save"]) || $_POST["save"] != "contact") {
// get the posted data
$name = $_POST["name"];
$email_address = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];
// write the email content
$email_content = "Name: $name\n";
$email_content .= "Email Address: $email_address\n";
$email_content .= "Subject: $subject\n";
$email_content .= "Message:\n\n$message";
// send the email
mail ("myemailaddress@somewhere.com", "Contact form", $email_content);
}
print "Form submitted successfully: <br>Your name is <b>".$_GET['name']."</b> and your email is <b>".$_GET['email']."</b><br>";
?>
フォームは検証を行っているように見えますが、送信ボタンを押すだけで上書きできます。動作は、送信が機能する前にフィールドに入力する必要があることです。すべてのフィールドが入力されている場合でも、フォームはメールを送信しますが、フィールドがありません。POST が PHP で機能していないか、javascript が process.php ファイルに送信していないようです。これはすべてこれに基づいていました: http://developer-paradize.blogspot.co.uk/2013/06/jquery-validation-validate-and-submit.html
誰かが助けてくれることを願っています。ありがとう。