Question

所以我有用于验证名字字段的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>

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");
?>

Answer 1

尝试

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

代替

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

你也可以这样开场：

document.getElementById('fname').value

Answer 2

在您的表单中，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>

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

Php / javascript电子邮件表单和验证

2 个答案: