Php / javascript电子邮件表单和验证 [英] Php/javascript email form and validation
问题描述
所以我有一个验证名字字段的JavaScript代码，一旦我做了这个，我添加了更多的验证。
So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.
所以基本上如果字段不是填写，返回假。
如果它返回true并继续email.php发送电子邮件。只有问题是它没有发送电子邮件到设置的地址。我对我出错的地方感到困惑。
So basically if the field is not filled in, return false. If it is return true and continue to email.php to send the email. Only problem is its not sending the email to the set address. I am confused as to where I have gone wrong.
当字段为空时，JavaScript有效。帮助。
The JavaScript is working when the field is empty, and when it has an input. Help.
PS：我已删除电子邮件地址以保护隐私。
PS: I have removed email address for privacy purposes.
联系人上的JavaScript。 html：
<script>
function validateForm() {
if (document.forms['email'].fname.value == ""){
alert("First name must be filled out");
return false;
}
else{
alert("Thank you! Your message was recieved!");
return true;
}
};
</script>
contact.html上的Html表单
<form id="email" name="email" onsubmit="return validateForm(this)" action="email.php" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value=""/>
</div>
</form>
php in email.php
<?php
if(isset($_POST['email'])) {
// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
//mail
mail($email_to, $email_subject, $email_content);
}
//return to contact page after submit.
header("location:contact.html");
?>
推荐答案
在您的表单中id =email与输入id =email
In your form id="email" is conflicting with input id="email"
您可以使用HTML5属性进行表单验证（在支持HTML5的浏览器中）
You can use HTML5 attributes for form validation (in HTML5 supported browsers)
http：//www.the-art-of -web.com/html/html5-form-validation/#.UnDpBHMW3eU
代码
<?php
if(isset($_POST['submit'])) {
print_r($_POST);
die;
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() {
var error = false;
var error_string = 'Please correct the following errors:\n\n';
if (document.getElementById('fname').value == ""){
error_string += "--> First name must be filled out.\n";
error = true;
}
if (document.getElementById('lname').value == ""){
error_string += "--> Last name must be filled out.\n";
error = true;
}
if (document.getElementById('email').value == ""){
error_string += "--> Email must be filled out.\n";
error = true;
}
if(error){
alert(error_string);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)" action="" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
我刚刚向您展示了客户端验证是否正常工作，表单正确发布。总是使用服务器端验证..
这篇关于Php / javascript电子邮件表单和验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
