検証付きのフォームを設定しようとしています。ユーザーが少なくとも1つのボックスを選択する必要があるチェックボックスを設定することは、非常に面倒になりつつあります。私はこのフォーラムや他のフォーラムから有望と思われるほとんどの解決策を試しましたが、役に立ちませんでした。
したがって、ユーザーが選択したものに応じて異なる電子メールに送信される2つの異なるチェックボックスがあります。現在、チェックボックスを選択せずにこのフォームを送信すると、フォームが更新されるだけで、エラーメッセージは表示されません。技術的には検証中だと思いますが、ユーザーはエラーメッセージを受け取りませんか？
コードは少し面倒です。これは、クライアント向けに本物を作成する前に、実験して機能させることができるかどうかを確認するために設定しているテストフォームです。
ちなみに、PHPとJavascriptの初心者です。前もって感謝します！
これがPHPコードです...
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
if(trim($_POST['checkbox']) == '') {
$agree = filter_input(INPUT_POST, 'checkbox');
$checked = '';
if( empty($agree) )
$errors['checkbox'] = true;
else{
$checked = 'checkbox';
}
}
//If there is no error, send the email
if(!isset($hasError) && $_POST['Charlotte']) {
$emailTo = 'Charlotte@email.com'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
//If there is no error, send the email
if(!isset($hasError) && $_POST['Mary']) {
$emailTo = 'Mary@email.com'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
これがJavascriptです...
<script type="text/javascript">
$(document).ready(function(){
// validate signup form on keyup and submit
var validator = $("#contactform").validate({
rules: {
contactname: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
checkbox: {
required: true,
},
subject: {
minlength: 2
},
message: {
minlength: 10
}
},
messages: {
contactname: {
required: "Please enter your name",
minlength: jQuery.format("Your name needs to be at least {0} characters")
},
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address"
},
checkbox: {
required: "Please select at least one location"
},
subject: {
minlength: jQuery.format("Enter at least {0} characters")
},
message: {
minlength: jQuery.format("Enter at least {0} characters")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
label.addClass("checked");
}
});
});
</script>
これがHTMLのフォームです...
<div class="wrapper">
<div id="contactWrapper" role="form">
<h1 role="heading">Send a message</h1>
<?php if(isset($hasError)) { //If errors are found ?>
<p class="error">Please check if you've filled all the fields with valid information and try again. Thank you.</p>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<div class="success">
<p><strong>Email Successfully Sent!</strong></p>
<p>Thank you for contacting us <strong><?php echo $name;?></strong>! Your email was successfully sent and we'll be in touch with you soon.</p>
</div>
<?php } ?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div class="stage clear">
<label for="name"> Name:<em>*</em></label>
<input type="text" name="contactname" id="contactname" value="" class="required" role="input" aria-required="true" />
</div>
<div class="stage clear">
<label for="email">Email:<em>*</em></label>
<input type="text" name="email" id="email" value="" class="required email" role="input" aria-required="true" />
</div>
<div class="stage clear">
<ul>
<p>Please select a box*</p>
<li><input type='checkbox' name='Charlotte' value='1' id='checkbox' /><label for="Charlotte">Charlotte</label></li>
<li><input type='checkbox' name='Mary' value='2' id='checkbox' /><label for="Mary">Mary</label></li>
</ul>
</div>
<div class="stage clear">
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" value="" class="required" role="input" aria-required="true" />
</div>
<div class="stage clear">
<label for="message">Message:</label>
<textarea rows="8" name="message" id="message" class="required" role="textbox" aria-required="true"></textarea>
</div>
<p class="requiredNote"><em>*</em>Denotes a required field.</p>
<input type="submit" value="Send Message" name="submit" id="submitButton" title="Click here to submit your message!" />
</form>
</div>
</div>
</div>