Php/javascript email form and validation

Question 1

So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.

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.

The JavaScript is working when the field is empty, and when it has an input. Help.

PS: I have removed email address for privacy purposes.

JavaScript on contact.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>

Html form on contact.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");
?>

Question 2

In your form id="email" is conflicting with input id="email"

You can use HTML5 attributes for form validation (in HTML5 supported browsers)

http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU

Code

<?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:nn';  
    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>

I just showed you how client side validation works and form is posting correctly.. You should always use server side validation..

Question 3

(Consult my Edit below)

You can use output buffering to capture the form and use a full http call for the action and send as HTML.

Sidenote: Be sure to change all instances example.com to your server address.

Example:

<?php 

ob_start();

echo '

      <form action="http://www.example.com/mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">


            <div class="submit-btn">
                <input type="submit"  value="Submit Request" />
            </div>

      </form>

';

$output = ob_get_contents();
ob_end_clean();

$to = "[email protected]";
$from = "[email protected]";

$subject = "Form submission";

$message = $output;

$headers = 'MIME-Version: 1.0' . "rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn";

$headers .= "From:" . $from;

mail($to,$subject,$message,$headers);

Then in your mail.php file:

Sidenote: I left out some of the POST arrays. You'll need to add those yourself. This is merely an example of something that worked for me.

<?php 

$first_name = $_POST['name'];

// The following is non-existant in your form. You can adjust to your liking.
$message = $_POST['message']; 

$to = "[email protected]";
$from = "[email protected]";

$subject = "Form submission 2";

$headers = 'MIME-Version: 1.0' . "rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn";

$headers .= "From:" . $from;

mail($to,$subject,$message,$headers);

Footnotes:

You may not be able to use JS here, but you can try it. I didn't use it in my test.

You'll also have to use some form of button or link to tell people to click to send. This is an experimental answer. I will end up modifying it as soon as I can.

References:

http://php.net/manual/en/function.ob-start.php
http://php.net/manual/en/function.ob-get-contents.php
http://php.net/manual/en/function.ob-end-clean.php

Edit:

Here's how this (new one, edited) works. (You will need to add your other POST arrays to mail.php as discussed in comments).

Sidenote: See comments in code for some added instructions. // comment...

The user enters their email address (taken from a separate form).
If it's not empty, capture the email in a POST array.
If the email is not empty, capture the whole thing in the output buffer.
Sends the form to the user.

New code:

<?php 

echo $form = '

      <form action="" method="POST" class="location-form">

            <input name="email_from" type="text" id="email_from">

                <input type="submit" name="submit" value="Submit Request" />

      </form>

';

if(!empty($_POST['email_from']) ){

// This outputs a message to the user after entering their email, and submits.
echo $from2 = "An email has been sent to: " . $_POST['email_from'];

}

$var = '

<div class="select-location-page">
      <h2>Where should we meet you?</h2>
      <p class="location-sub-header">Fill out this form and we will meet you within 1 hour!</p>


      <form action="http://www.example.com/mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">

            <div class="submit-btn">
                <input type="submit" value="Submit Request from Email" />
            </div>

      </form>

      <script>
        document.getElementById("result").innerHTML = localStorage.getItem("sum");
      </script>

  </div>

';

if(!empty($_POST['email_from']) ){

  ob_start();

    echo $var;

    $output = ob_get_contents();
    ob_end_clean();

    $to = $_POST['email_from']; // Send to the email entered by the user
    $from = "[email protected]"; // This should be YOUR E-mail address

    $subject = "Form submission";

    $message = $output;

    $headers = 'MIME-Version: 1.0' . "rn";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn";

    $headers .= "From:" . $from;

  mail($to,$subject,$message,$headers);


}

Again, the javascript may not work for this, so you might have to think of another way or just omit it.

Question 4

No, there is no way you can send email using pure html. Email is sent over SMTP protocol. A browser operates in HTTP protocol. So it's not possible to send email even using pure javascript. Only server can send data using SMTP protocol.

Question 5

You need to write custom Validator, which will take the array and validate each ofthe emails in array manually. In Laravel 5 Request you can do something like that

public function __construct() {
    Validator::extend("emails", function($attribute, $value, $parameters) {
        $rules = [
            'email' => 'required|email',
        ];
        foreach ($value as $email) {
            $data = [
                'email' => $email
            ];
            $validator = Validator::make($data, $rules);
            if ($validator->fails()) {
                return false;
            }
        }
        return true;
    });
}

public function rules() {
    return [
        'email' => 'required|emails'
    ];
}

Question 6

To check and validate for single '@'. The below mentioned one is the standard Email Regex which is been used:

w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*

Php/javascript email form and validation

Answers

Edit:

javascript,php,html,email,email-validation