PHP/javascript 电子邮件表单和验证答案

【问题标题】：Php/javascript email form and validationPHP/javascript 电子邮件表单和验证
【发布时间】：2013-11-09 22:01:18
【问题描述】：

所以我有验证名字字段的 JavaScript 代码，一旦我解决了这个问题，我将添加更多验证。

所以基本上如果该字段没有填写，则返回false。如果返回 true 并继续到 email.php 发送电子邮件。唯一的问题是它没有将电子邮件发送到设置的地址。我很困惑我哪里出错了。

当字段为空且有输入时，JavaScript 正在工作。帮助。

PS：出于隐私目的，我删除了电子邮件地址。

contact.html 上的 JavaScript：

<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>

email.php 中的 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");
?>

【问题讨论】：

标签： javascript php html email email-validation

【解决方案1】：

在您的表单中 id="email" 与输入 id="email" 冲突

您可以使用 HTML5 属性进行表单验证（在支持 HTML5 的浏览器中）

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>

我刚刚向您展示了客户端验证的工作原理以及表单如何正确发布。您应该始终使用服务器端验证。

【讨论】：

是的，谢谢！我将表单重命名为 emailform，并使用了上面答案中的建议，但仍然没有发送电子邮件。我还从 php 代码中删除了 if(isset($_POST['emailform']))。

【解决方案2】：

试试

document.forms["email"]["fname"].value

改为

document.forms['email'].fname.value

您也可以通过这种方式获取字段：

document.getElementById('fname').value

【讨论】：